UnderlineNav v2

Draft

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

On this page

Examples

Simple

<UnderlineNav label="simple nav">
  <UnderlineNav.Item selected>Item 1</UnderlineNav.Item>
  <UnderlineNav.Item>Item 2</UnderlineNav.Item>
  <UnderlineNav.Item>Item 3</UnderlineNav.Item>
</UnderlineNav>

<UnderlineNav label="simple nav">
  <UnderlineNav.Item selected>Item 1</UnderlineNav.Item>
  <UnderlineNav.Item>Item 2</UnderlineNav.Item>
  <UnderlineNav.Item>Item 3</UnderlineNav.Item>
</UnderlineNav>

With icons

<UnderlineNav label="simple nav with icons">
  <UnderlineNav.Item selected leadingIcon={EyeIcon}>
    Item 1
  </UnderlineNav.Item>
  <UnderlineNav.Item>Item 2</UnderlineNav.Item>
</UnderlineNav>

<UnderlineNav label="simple nav with icons">
  <UnderlineNav.Item selected leadingIcon={EyeIcon}>
    Item 1
  </UnderlineNav.Item>
  <UnderlineNav.Item>Item 2</UnderlineNav.Item>
</UnderlineNav>

Small variant

<UnderlineNav label="small variant" variant="small">
  <UnderlineNav.Item selected>Item 1</UnderlineNav.Item>
  <UnderlineNav.Item>Item 2</UnderlineNav.Item>
</UnderlineNav>

<UnderlineNav label="small variant" variant="small">
  <UnderlineNav.Item selected>Item 1</UnderlineNav.Item>
  <UnderlineNav.Item>Item 2</UnderlineNav.Item>
</UnderlineNav>

Props

UnderlineNav

Name	Type	Default	Description
aria-label	string
aria-labelledby	string
aria-describedby	string
overflow	'auto' \| 'menu' \| 'scroll'	auto	Controls the type of overflow behaviour in smaller screens
align	right \| left	left	The alignment of the nav links
variant	default \| small	default	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.Item

Name	Type	Default	Description
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	a	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

2 contributors

Last edited by broccolinisoup on September 5, 2022