The NavBar holds the navigation for Nulogy applications and a global search.
This component is being deprecated
We're replacing this component with BrandedNavBar. Please use that instead. If you're currently using this version of the NavBar and need assistance upgrading, reach out to the Design Ops team.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: '/' },
],
},
];
const search = {
onSubmit: () => {},
};
<NavBar menuData={ { primaryMenu, secondaryMenu, search } } />
Name | Type | Default | Description |
---|---|---|---|
menuData | object | null | Data used to build link heirarchy and search functionality. See menuData Prop section below. |
subtext | string | null | The subtext under the logo. |
brandingLinkHref | string | / | The link href for the logo. |
breakpointUpper | number | 1024 | Provides the breakpoint where menu items will be collapsed into a dropdown menu. |
breakpointLower | number | 768 | Provides the breakpoint where the logo is collapsed from wordmark to lettermark. |
themeColor | string | blue | Color themeing of NavBar component, either "blue" or "white". |
The menuData prop is used to provide links to the NavBar, assemble their heirarchy, and provide the search field's onSubmit handler. The direct children in the menuData object are shown below:
const menuData = {
primaryMenu: [],
secondaryMenu: [],
search: {
onSubmit: () => (),
},
}
Key | Type | Description |
primaryMenu | array of menu item objects | Data to the main navigation menu, aligned to the left of the NavBar. |
secondaryMenu | array of menu item objects | Data to the secondary navigation menu, aligned to the right of the NavBar. |
search | object | Object's onSubmit key provides onSubmit to search. |
Not providing data for primaryMenu, secondaryMenu or search will result in those components not being included.
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.
Key | Type | Description |
name | string | node (required) | 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. |