NavBar

How to use the NavBar

Create a component called Navigation.js and place it in your app where your navigation should be shown.

Inside that Navigation.js component, create an instance of NavBar and pass in the necessary props as explained and exemplified below.

1import NavBar from '@hummingbot/hbui/components/navigation/NavBar'
2import { Link } from 'react-router-dom' // or import { Link } from "gatsby" (in gatsby projects) or or import Link from "next/link" (in Next.js projects)
3
4const siteNameA = 'Hummingbot'
5const siteNameB = 'Prime'
6const userData = null
7const linksRight = [
8  { url: "/components/navigation/navbar", label: "Launchpad" },
9  { url: "/components/navigation/navbar", label: "Fleet" },
10  { url: "/components/navigation/navbar", label: "Strategies" },
11  { url: null,
12    label: 'Item With Sublinks',
13    subLinks: [
14      { label: 'Anchor Link', url: '/components/navigation/navbar#anchor', external: false },
15      { label: 'Inner Page', url: '/components/navigation/navbar', external: false },
16      { label: 'External Link', url: 'https://www.google.com', external: true }
17    ] 
18  },
19]
20const linksLeft = null
21const linkCTA = {
22  label: 'CTA',
23  url: 'https://www.google.com',
24  external: true,
25  buttonStyle: 'success',
26}
27
28return (
29  <NavBar
30    linkClass={Link}
31    showThemeToggle={true}
32    siteNameA={siteNameA}
33    siteNameB={siteNameB}
34    userData={userData}
35    linksLeft={linksLeft}
36    linksRight={linksRight}
37    linkCTA={linkCTA}
38    customLogoSVG={null}
39    position='relative'
40    containerVariant='full'
41  />
42)

Available props:

siteNameA: (string) This is the main label displayed (usually your site name).

siteNameB: (string) (optional) extra label to append to the main label - for example "Prime" in "Hummingbot Prime". This will be showin in a thinner font style.

logo: (string) default is "hummingbot".

showThemeToggle: (boolean) (default: "false") If true, the NavBar will display an icon to toggle the app between dark and light modes. Do not use this if your app is not ready to deal with these color modes.

linkClass: (class) The Link component of your particular project type (see "important note" below).

position: (string) (default: "fixed") CSS position for the NavBar root. If a value other than "fixed" is needed in your case, pass "relative" or "absolute" accordingly.

customLogoSVG: (SVG component) (default: "null") Provide an SVG component to display as a custom logo.

containerVariant: (string) ("short", "large", "full") to set the desired max-width of the content inside the navbar.

linksRight: (array) Set of links to show in the left side.

Array should contain a sequence of objects with the following properties:

label (string)

url (string)

subLinks (array) array of objects of nested links - these accept an additional property type "external" (boolean) for external links - these will show an external link icon.

linkCTA: (object) (optional) Enables a highlighted CTA to be shown on the right side.

Object should contain:

label (string)

url (string)

external (boolean)

buttonStyle (string) - can be "success", "terminal", "info" or "secondary"

userData: (object) (only for apps with a login feature) User data to display if a user is logged in.

Object should contain:

name (string)

profileImage (string) - URL to the profile image

Important note:

The Link component of your particular project type must be passed as a prop for the NavBar component to work. For example, CreateReactApp projects use Link from react-router-dom, and Gatsby Projects use Link from the Gatsby package itself.