UnderlineNav

Anatomy

Edit in Figma

• Item: Tabs to switch between views when activated.
• Current item: The item currently selected is highlighted with an underline.
• Label text: Describes the navigation item.
• Leading icon (optional): An icon that identifies the navigation item.
• Counter (optional): Displays a count next to the label.
• Overflow menu: Reveals extra items when space is limited.

Best practices

• Discrete content: Each tab should load unique content with a dedicated URL.
• Default selected item: A tab should be preselected on page load.
• Minimize items: Limit the number of tabs to avoid clutter; consider using a NavList for larger menus.
• Task completeness: Each view should allow users to complete tasks without switching tabs.
• Non-sequential: Tabs should support free, non-sequential navigation, not stepped flows.

Content

Each tab's label should be the title of the view associated with that tab. Keep labels clear, short, and concise.

Don't rely on icons or tooltips to explain the tab.

Hierarchy

Tabs may be used to switch between content at different levels of hierarchy:

• subpages within a larger context
• content panels within a section of a page

Avoid more than 2 levels of tab hierarchy. If you need more than 2 levels of hierarchy, consider:

• rethinking your information architecture
• removing a layer of hierarchy and putting more content on the page
• using a NavList for a level of hierarchy

Stacking

Don't stack multiple UnderlineNavs or UnderlinePanels directly on top of eachother to convey hierarchical levels of navigation. Instead, consider using a NavList for a higher level of hierarchy.

Layout

Placement

UnderlineNav should be placed directly above the content it affects.

Alignment

Align the the UnderlineNav to the left and, when possible, make the component span the available width.

The left and right edges of the UnderlineNav should not extend beyond the width of the content it affects.

Clear beginning and end

It should be clear where the tab-switchable content begins and ends. Use spacing, borders, headings, or other visual cues to make it clear where the tab-switchable content ends.