Branded NavBar

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

import {NavBar} from "@nulogy/components";

const primaryMenu = [
    name: 'Dashboard',
    items: [
      { name: 'Customers', href: '/' },
      { name: 'Invoices', href: '/' },
  { name: 'Link', href: '/' },

const secondaryMenu = [
    name: 'Settings',
    items: [
      { name: 'Permissions', href: '/' },
      { name: 'Manage account', href: '/' },

<BrandedNavBar menuData={ { primaryMenu, secondaryMenu } } />


With a customer logo

Providing a path to a logo via the logo prop will replace the logo on the left with a customer's, and add a Nulogy tag to the right side of the menu.

  menuData={{ primaryMenu, secondaryMenu }}
  subtext="Quality control"






Data used to build link heirarchy functionality. See menuData Prop section below.




The subtext under the Nulogy logo.


string enum 'training'| 'development'


If defined, shows a blue banner above the navbar which indicates the set environment




A custom link for the logo.




Provides the breakpoint where menu items will be collapsed into a dropdown menu.




A path to a logo file

menuData Prop

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:

const menuData = {
  primaryMenu: [],
  secondaryMenu: [],
primaryMenuarray of menu item objectsData to the main navigation menu, aligned to the left of the NavBar.
secondaryMenuarray of menu item objectsData to the secondary navigation menu, aligned to the right of the NavBar.

Not providing data for primaryMenu, secondaryMenu will result in those components not being included.

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.

namestring | node (required)Unique identifier for the menu item.
ariaLabelstringAdd an aria-label if the `name` value is not a readable label, like an icon.
hrefstringURL or link to an element similar to a standard <a> tag, this causes the menu item to render as a link within the NavBar.
itemsarrayArray of menu item objects. This causes the menu item to render as a dropdown in desktop view or as a heading in mobile view.
renderfunctionFunction 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.