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

UnderlineNav v2

Use an underlined nav to allow tab like navigation with overflow behaviour in your UI.
  • Draft
  • Review pending by accessibility team
On this page
import {UnderlineNav} from '@primer/react/drafts'

Examples

Simple

With Icons

Overflow Behaviour

Component first hides icons if they present to optimize for space and show as many items as possible. If there is still an overflow, it will display the items that don't fit in the More menu.

Loading State For Counters

With React Router

import {Link} from 'react-router-dom'
import {UnderlineNav} from '@primer/react/drafts'
const Navigation = () => {
  return (
    <UnderlineNav aria-label="Repository">
      <UnderlineNav.Item as={Link} to="code" counter={4} selected>
        Code
      </UnderlineNav.Item>
      <UnderlineNav.Item counter={44} as={Link} to="issues">
        Issues
      </UnderlineNav.Item>
      <UnderlineNav.Item as={Link} to="pulls">
        Pull Requests
      </UnderlineNav.Item>
    </UnderlineNav>
  )
}

Props

UnderlineNav

NameTypeDefaultDescription
children Required
UnderlineNav.Item[]
aria-label
string
A unique name for the rendered 'nav' landmark. It will also be used to label the arrow buttons that control the scroll behaviour on coarse pointer devices. (I.e. 'Scroll ${aria-label} left/right')
loadingCounters
boolean
falseWhether the navigation items are in loading state. Component waits for all the counters to finish loading to prevent multiple layout shifts.
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
href
string
The URL that the item navigates to. 'href' is passed to the underlying '<a>' element. If 'as' is specified, the component may need different props and 'href' is ignored. (Required prop for the react router is 'to' for example)
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. For example, a manual route binding can be done here(I.e. 'navigate(href)' for the react router.)
as
string | React.ElementType
aThe underlying element to render — either a HTML element name or a React component.
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 October 25, 2022