Components
Navigation
Navigation bars groups primary links together to form navigation. Some instances of navigation bars help separate different sections on detail pages or pages that have various sections
Variations
Variations of the navigation include:
The main sub menu that displays underneath the tool bar. This is use globally throughout Neon and is located directly underneath the toolbar. Our users can modify the menu items that the use the most out of Neon. Anything represented here is used to frame the context for how the menu should function.
Use this menu for grouping out sections in a page. Use Vertical Menu Bars for detail pages or pages with large blocks of content.
Usage
Button Type
Purpose
Horizontal
Vertical
For the principle call to action on the page.
For secondary actions on each page.
Best Practices
- Keep the names of the navigation items brief and clear, rather than trying to be overly specific.
- Use the word that feels right for the navigation. For example, some items may make better sense as nouns (e.g. “Documents”), others as adjectives (“New”). Use what makes sense for user.
- Try to keep the navigation in a consistent order across platforms. This sort of consistency increases predictability which drives user confidence, thus retaining and engaging them.
- Overload the navigation. Too many items in the navigation is indicative being poorly organized or trying to do too much.
- For the most part - try not to include actions. Actions should be handled in the "create" button in the toolbar. However there will still be a few actions in the nav as we trim the fat. The button makes it obvious that tapping will execute a command instead of navigating.