Skip to content
Primer/React
What's new
Design
Interface guidelinesOcticonsPresentationsCommand lineMobileDesktop
Build
CSSReactViewComponents
ContributeAbout
On this page

UnderlineNav v2

Draft
Use an underlined nav to allow tab like navigation with overflow behaviour in your UI.
On this page

Examples

Simple

With icons

Props

UnderlineNav

NameTypeDefaultDescription
aria-label
string
aria-labelledby
string
aria-describedby
string
overflow
'auto' | 'menu' | 'scroll'
Controls the type of overflow behaviour in smaller screens
align
right | left
The alignment of the nav links
afterSelect
(event) => void
The handler that gets called when a nav link child is selected
sx
SystemStyleObject
Style overrides to apply to the component. See also overriding styles.

UnderlineNav.Link

NameTypeDefaultDescription
leadingIcon
Component
The leading icon comes before item label
selected
boolean
Whether the link is selected
onSelect
(event) => void
The handler that gets called when a nav link is selected
as
string | Component
What kind of component needs to be rendered
sx
SystemStyleObject
Style overrides to apply to the component. See also overriding styles.

Status

Alpha

  • Component props are documented on primer.style/react.
  • Component does not have any unnecessary third-party dependencies.
  • Component can adapt to different themes.
  • Component can adapt to different screen sizes.
  • Component has 100% test coverage.

Beta

  • Component is used in a production application.
  • Common usage examples are documented on primer.style/react.
  • Common usage examples are documented in storybook stories.
  • Component has been reviewed by a systems designer and any resulting issues have been addressed.
  • Component has been manually reviewed by the accessibility team and any resulting issues have been addressed.

Stable

  • Component API has been stable with no breaking changes for at least one month.
  • Feedback on API usability has been sought from developers using the component and any resulting issues have been addressed.
  • Component has corresponding design guidelines documented in the interface guidelines.
  • Component has corresponding Figma component in the Primer Web library.
Edit this page on GitHub
1 contributorpksjce
Last edited by pksjce on August 8, 2022