UnderlineNav
The UnderlineNav is used to display navigation in a horizontal tabbed format.
Page navigation navigation
The UnderlineNav provides navigation links to let users switch between 2 or more related views without leaving their current context.
If you want to use this pattern without any linked items, use the UnderlinePanels component.
React examples
Default
Repository navigation
With counter badges
You may include a counter for relevant counts (e.g., open issues) and load them simultaneously to prevent layout shifts.
When loading multiple counters asynchronously, wait for all the data to be ready before displaying the counters, so you can avoid multiple layout shifts.
Repository navigation
With leading icons
Use consistent, meaningful icons to aid scannability. Either items in the navigation should have a leading icon or none of the items do.
Make sure that icons used are consistent across views, and that they are not repeated for different navigation items across the product.
Repository navigation
More code examples
The previous examples are a curated subset of the full capabilities (such as reponsive behavior) of the UnderlineNav component. For more examples, see the UnderilneNav Storybook stories