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/systemsauce 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.
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
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 and UnderlineNav.Link components get
FLEX_CONTAINER system props. Read the System Props doc page for a full list of available props.
UnderlineNav.Link also gets the
VARIANTS.OUTLINE system props.
|actions||Node||Place another element, such as a button, to the opposite side of the navigation items.|
|full||Boolean||Used to make navigation fill the width of the container.|
|label||String||Used to set the |
|is||String||sets the HTML tag for the component|
|selected||Boolean||Used to style the link as selected or unselected|