Search/

Subnav

Last modified:

The secondary menu for sub-sections within a primary navigation section.

Example of Subnav - default

<BcSubnav>
  <BcSubnav.Item isActive href='#'>
    Brief & scope
  </BcSubnav.Item>
  <BcSubnav.Item href='#'>Known issues</BcSubnav.Item>
</BcSubnav>

React documentation

Last modified:

BcSubnav is parent wrapper component for subnav.

No props

BcSubnav.item props

BcSubnav.item is an individual item in subnav. It accepts the following props.

PropTypeRequired?DefaultDescription
isActivebooleanfalsefalseTo show the current active subnav
hrefstringfalseTo link the url with item
childrenstring or ReactElementtrueTo show the item content

HTML

Last modified:

The Sub nav is a list of anchors wrapped by the HTML <nav> element.

Design

Last modified:

You can wrap the Sub nav in a Panel. Use the --lined Panel variant to retain the bottom border.

A .bc-subnav__item--active class is provided to style the current/active anchor.

Accessibility

Last modified:

Rationale

Last modified:

See also

Last modified: