BrandedNavBar

A light navigation bar that can optionally support a customer's logo.

menuData

{
        primaryMenu: [
          {
            name: 'Dashboard',
            items: [
              { name: 'Customers', href: '/' },
              { name: 'Invoices', href: '/' },
            ],
          },
          { name: 'Link', href: '/' },
        ],
        secondaryMenu: [
          {
            name: 'Settings',
            items: [
              { name: 'Permissions', href: '/' },
              { name: 'Manage account', href: '/' },
            ],
          },
        ]
      }

{
        primaryMenu: [
          {
            name: 'Dashboard',
            items: [
              { name: 'Customers', href: '/' },
              { name: 'Invoices', href: '/' },
            ],
          },
          { name: 'Link', href: '/' },
        ],
        secondaryMenu: [
          {
            name: 'Settings',
            items: [
              { name: 'Permissions', href: '/' },
              { name: 'Manage account', href: '/' },
            ],
          },
        ]
      }

subtext

brandingLinkHref

breakpointUpper

environment

training

development

none

logo

import * as React from "react";
import { BrandedNavBar } from "@nulogy/components";

export default () => {
  return (
    <BrandedNavBar
      menuData={{
        primaryMenu: [
          {
            name: "Dashboard",
            items: [
              { name: "Customers", href: "/" },
              { name: "Invoices", href: "/" }
            ]
          },
          { name: "Link", href: "/" }
        ],
        secondaryMenu: [
          {
            name: "Settings",
            items: [
              { name: "Permissions", href: "/" },
              { name: "Manage account", href: "/" }
            ]
          }
        ]
      }}
    />
  );
}

import * as React from "react";
import { BrandedNavBar } from "@nulogy/components";

export default () => {
  return (
    <BrandedNavBar
      menuData={{
        primaryMenu: [
          {
            name: "Dashboard",
            items: [
              { name: "Customers", href: "/" },
              { name: "Invoices", href: "/" }
            ]
          },
          { name: "Link", href: "/" }
        ],
        secondaryMenu: [
          {
            name: "Settings",
            items: [
              { name: "Permissions", href: "/" },
              { name: "Manage account", href: "/" }
            ]
          }
        ]
      }}
    />
  );
}

Props

Name	Type	Default	Description
menuData	object	null	Data used to build link heirarchy functionality. See menuData Prop section below.
subtext	string	null	The subtext under the Nulogy logo.
brandingLinkHref	string	/	A custom link for the logo.
breakpointUpper	number	1024	Provides the breakpoint where menu items will be collapsed into a dropdown menu.
environment	enum		If defined, shows a blue banner above the navbar which indicates the set environment
logo	string		A path to a logo file

MenuData PropsTable

The menuData prop is used to provide links to the NavBar and assemble their heirarchy. The direct children in the menuData object are shown below:

Name	Type	Default	Description
primaryMenu	array		Data to the main navigation menu, aligned to the left of the NavBar.
secondaryMenu	array		Data to the secondary navigation menu, aligned to the right of the NavBar.

Adding Menu Items

Both primaryMenu and secondaryMenu expect an array of objects. Each object represents a link or a heading to a group of links under it, with the following shape:

const primaryMenu = [
  {
    name = "string",
    href = "/",      // optional
    render = ()=>(), // optional
    items = [],      // optional
  },
]

Each menu item object requires a "name" key. The "name" key will be used as the label for the menu item unless a "render" key is used. Adding "items" to the menu item object will render a dropdown with the specified items.

Menu items can be nested within eachother using the items key for as many levels of heirarchy that is needed.

Name	Type	Description
name	react node	Unique identifier for the menu item.
ariaLabel	string	Add an aria-label if the `name` value is not a readable label, like an icon.
href	string	URL or link to an element similar to a standard <a> tag, this causes the menu item to render as a link within the NavBar.
items	array	Array of menu item objects. This causes the menu item to render as a dropdown in desktop view or as a heading in mobile view.
render	function	Function that returns JSX. This causes the menu item to render as the JSX provided wrapped in a component that provides styling and an onClick handler to close the menu. NOTE: Do not use `href` and `items` keys if you intend to use the render function.

BrandedNavBar

Props

MenuData PropsTable

Adding Menu Items

Related Components