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.
View sourceView storybook
On this page
import {UnderlineNav} from '@primer/react/drafts'

Examples

Simple

With icons

Overflow Behaviour

When overflow occurs, the component first hides icons if present to optimize for space and show as many items as possible. (Only for fine pointer devices)

Items without Icons

Display More menu

If there is still overflow, the component will behave depending on the pointer.

Props

UnderlineNav

NameTypeDefaultDescription
aria-label
string
aria-labelledby
string
aria-describedby
string
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.Item

NameTypeDefaultDescription
icon
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
aWhat 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
2 contributorsbroccolinisouppksjce
Last edited by broccolinisoup on September 5, 2022