UnderlineNav

Use the UnderlineNav component to style navigation with a minimal underlined selected state, typically used for navigation placed at the top of the page.

Pro tip: The UnderlineNav component has been repurposed and wrapped with the @bristlecone/system sauce to extend Primer's original intent for this component, however, their respective component should be considered anytime you are looking to represent more of the GitHub look-n-feel for navigation as a default.

Default example

Using <UnderlineNav.Link>

<ExampleHeading>
  Using <Text fontFamily="mono">{'<UnderlineNav.Link>'}</Text>
</ExampleHeading>
<UnderlineNav>
  <UnderlineNav.Link href="#foo" selected>
    Selected
  </UnderlineNav.Link>
  <UnderlineNav.Link href="#bar">Bar</UnderlineNav.Link>
  <UnderlineNav.Link href="#baz">Baz</UnderlineNav.Link>
</UnderlineNav>

With Actions

Navigation menu can have corresponding actions, typically a set of UI elements to invoke, as the name implies, user actions, like shown below through the usage of the Button component.

<UnderlineNav actions={
<Flex>
    <Button icon='tools'>Action 1 <CounterLabel ml={1} scheme={'light'}>13</CounterLabel></Button>
    <Button icon='cloud-download' variant='purple'>Action 2</Button>
    <Button icon='cloud-download' variant='purple'>Action 3</Button>
    <Button icon='kebab-vertical' />
</Flex>
}>
  <UnderlineNav.Link href="#foo" selected>
    Selected <CounterLabel ml={1} scheme={'dark'}>13</CounterLabel>
  </UnderlineNav.Link>
  <UnderlineNav.Link href="#bar">Bar</UnderlineNav.Link>
  <UnderlineNav.Link href="#baz">Baz</UnderlineNav.Link>
</UnderlineNav>

The default UI placement of actions is to the right of the main navigation items, as shown above. To change this, simple pass-in the reverse boolean prop to UnderlineNav and the actions and nav items flip sides, as follows

<UnderlineNav reverse actions={
<Flex>
    <Button icon='kebab-vertical' />
    <Button icon='tools'>Action 1 <CounterLabel ml={1} scheme={'light'}>13</CounterLabel></Button>
    <Button icon='cloud-upload' variant='primary'>Action 2</Button>
    <Button icon='cloud-download' variant='purple'>Action 3</Button>
</Flex>
}>
  <UnderlineNav.Link href="#foo" selected>
    Selected
  </UnderlineNav.Link>
  <UnderlineNav.Link href="#bar">Bar</UnderlineNav.Link>
  <UnderlineNav.Link href="#baz">Baz</UnderlineNav.Link>
</UnderlineNav>

System props

UnderlineNav and UnderlineNav.Link components get BACKGROUND, BORDER, COMMON, and FLEX_CONTAINER system props. Read the System Props doc page for a full list of available props.

UnderlineNav.Link also gets the VARIANTS.BASE and VARIANTS.OUTLINE system props.

Component props

UnderlineNav

Prop nameTypeDescription
actionsNodePlace another element, such as a button, to the opposite side of the navigation items.
alignStringUse right to have navigation items aligned right.
fullBooleanUsed to make navigation fill the width of the container.
labelStringUsed to set the aria-label on the top level <nav> element. Learn more about aria-* properties.

UnderlineNav.Link

Prop nameTypeDescription
isStringsets the HTML tag for the component
selectedBooleanUsed to style the link as selected or unselected