/

<Subnav> Component

Displays a navigation bar, with links and a call-to-action. Links can be organized into submenus, although from a UX standpoint it's preferable to provide simplified, flattened navigation. The Subnav is intended for use directly below our primary navigation.

Share
Code Editor
<Subnav

  titleLink={{ text: 'Title', url: '#' }}

  menuItems={[

    { text: 'Link One', url: '#'},

    { text: 'Link Two', url: '#'},

    { text: 'Link Three', url: '#'}

  ]}

  ctaLinks={[

    { text: 'CTA Button', url: '#' }

  ]}

/>

Without CTA:

Where it's used

Latest:9.6.0
Search with

Releases

Latest:9.6.0
registry.npmjs.org
[object Object]
0.x.x
Loading 0.x.x releases...
1.x.x
Loading 1.x.x releases...
2.x.x
Loading 2.x.x releases...
3.x.x
Loading 3.x.x releases...
4.x.x
Loading 4.x.x releases...
5.x.x
Loading 5.x.x releases...
6.x.x
Loading 6.x.x releases...
7.x.x
Loading 7.x.x releases...
8.x.x
Loading 8.x.x releases...
9.x.x
Loading 9.x.x releases...

Props

NameDescription
titleLink*
object
Options for the primary logo/title link on the left side of the navigation
Object contains nested props, see below:
titleLink.text
string
Passing a product slug to triggers a special case, where the product's logo and brand colors are used. Note that in other cases, it should be a string with proper casing.
Options: "hashicorp", "boundary", "consul", "nomad", "packer", "terraform", "vault", "vagrant", "waypoint", "hcp", "tfc"
titleLink.url
string
A link applied to the product name or logo
ctaLinks
array
An array of items to be displayed as buttons to the far right. There are special values for "Download" and "Github" if these are passed as the text.
Array members must be of the type below:
ctaLinks[x]
object
Object contains nested props, see below:
ctaLinks[x].text
string
ctaLinks[x].url
string
ctaLinks[x].theme
object
An optional theme object, which will be passed to the Button element for this link, and will override and default settings in the component.
ctaLinks[x].onClick
function
Optional function that will be called when the button is clicked.
hideGithubStars
boolean
If true, will ensure GitHub stars are not shown in any ctaLinks, even if the special value GitHub is passed
menuText
string
Optionally define mobile menu "Menu" text.
menuItems*
array
An array of links to be displayed as navigation menu items.
Array can contain any of the 3 types below:
menuItems[x]
string
Using the string "divider" will render a vertical divider between items
Options: "divider"
menuItems[x]
object
This type will render a single link in the menu
Object contains nested props, see below:
menuItems[x].text
string
menuItems[x].url
string
menuItems[x].type
string
Options: "inbound", "outbound", "anchor"
menuItems[x]
object
This type will render a dropdown menu with multiple links in the menu
Object contains nested props, see below:
menuItems[x].text
string
menuItems[x].submenu
object
Object contains nested props, see below:
menuItems[x].submenu.text
string
menuItems[x].submenu.url
string
menuItems[x].submenu.type
string
Options: "inbound", "outbound", "anchor"
menuItemsAlign
string
Controls alignment of menu bar items on Desktop
Options: "center", "right"
constrainWidth
boolean
If true, will match the width of g-grid-container
currentPath
string
The current active path relative to the root of the site. Will be matched to the url property of menuItems to determine the active page.
Link
React.Element
The NextJS Link component to make client-side routing possible. Note that this is passed directly to @hashicorp/react-link-wrap, so we'll fall back to a normal tag if this prop is not provided.
matchOnBasePath
boolean
Whether or not to highlight items if the base path matches the current URL. Defaults to false, requiring a full URL match.
className
string
Optional className to add to the root element