Navigation Menu
The navigation component provides the primary means for users to move between sections of the application. On small screens, the Navigation menu is presented as a top-bar, while on larger screens the Navigation menu is presented as a left side-bar.
Best Practices
The Navigation component should:
- Be paired as sibling of the Page and Page header components
- Contain primary navigation links that either immediately navigate to a URL, or expand with additional navigation menu content.
- Group utility navigation links
Examples
Basic Navigation
Use the Navigation component to offer a menu containing navigation links, either as a top-bar on smaller screens or as a left side-bar on larger screens.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices finibus purus, in maximus diam molestie nec. Aenean maximus eget lacus sed lobortis.
Navigation using Link components
Normally links render an anchor element, but in order to support client-side routing implementations, you can provide a Link component, such as react-router's link component, to render via the optional as property. EzLink will forward its props to the provided component.
When using the as prop, you must use the to prop in place of href to provide the destination url for the link.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices finibus purus, in maximus diam molestie nec. Aenean maximus eget lacus sed lobortis.
Grouped Navigation links
Use grouped navigation links to promote discoverability of related pages.
Components
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices finibus purus, in maximus diam molestie nec. Aenean maximus eget lacus sed lobortis.
Utility Navigation
Use utility links to offer navigation paths to sections of the application that offer content to support the primary purpose of the application, e.g. managing user account settings.
Utility links can only be used in conjunction with the main navigation links. On larger screens, the main navigation will expand to fill the available vertical space, such that the utility links are presented at the bottom of the screen.
To optionally add icons to a utility links, pass an EzIcon as icon in a utility link.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices finibus purus, in maximus diam molestie nec. Aenean maximus eget lacus sed lobortis.
Navigation links with notifications
Notifications can be used to present supporting context next to the navigation items, and typically represent a indication that new content is available.
On larger screens, notifications can be viewed to provide at-a-glance context that a particular navigation link has available content to interact with. When presented on smaller screens, the total number of notifications is summed and displayed on the navigation top-bar allowing the user to be notified of important content even when the navigation menu is collapsed.
Note: a special notification value ★ can be used to highlight the link for ezOrdering marketing.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices finibus purus, in maximus diam molestie nec. Aenean maximus eget lacus sed lobortis.
Navigation user menu
The user menu displays the user's name and actions that are related to the current user.
To optionally change the user menu default icon, pass an EzIcon as icon in userMenu.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices finibus purus, in maximus diam molestie nec. Aenean maximus eget lacus sed lobortis.
Browser support
The Navigation component internally uses Element.prototype.closest() and may require a polyfill to provide browser support depending on the specific requirements for your application. We recommend using Polyfill.io in your application to apply necessary polyfills only when they are needed for the requesting browser.