Vertical nav

Last modified:

Vertical navigation used for third-level navigation.

    <BcVerticalNav.Anchor href='#'>Navigation item</BcVerticalNav.Anchor>
  <BcVerticalNav.Item isActive>
    <BcVerticalNav.Anchor href='#'>
      Navigation active item
  <BcVerticalNav.Item isDisabled>
    <BcVerticalNav.Anchor href='#'>
      Navigation disabled item

React documentation

Last modified:

BcVerticalNav is parent wrapper component for vertical-nav, it accepts following props.

variantstringfalseleftActiveTo set active item border on the left or right
classNamestringfalseTo add additional classes

Any other props will be passed to the nav element

Extended types:

  • React.HTMLAttributes<HTMLUListElement>


BcVerticalNav.Sublist is an ul element holding all the BcVerticalNav.Item

You can nest a BcVerticalNav.Sublist inside BcVerticalNav.Item to create a nested vertical nav

Level controls the nested level of the list

levelLevelfalseprimary, secondary or tertiaryprimaryControls the nested level of the list

Extended types: React.HTMLAttributes<HTMLUListElement>


BcVerticalNav.Item holds the item in vertical-nav, it accepts the following props.

Pass BcVerticalNav.Anchor or any other component that renders an anchor element.

Pass BcVerticalNav.Sublist to create a nested vertical nav.

isActivebooleanfalsefalseTo show an active vertical nav item
isDisabledbooleanfalsefalseTo disable a vertical nav item
childrenstring or ReactElementtrueTo show the item content
classNamestringfalseTo add additional classes to the parent

Any other props will be passed to the li element

Extended types: React.HTMLAttributes<HTMLLIElement>


BcVerticalNav.Anchor is an anchor tag with .bc-vertical-nav__link className.

There is no specific props for this component but it extends the html attributes of the base anchor element.

Pass badges or icons into this component.

childrenReactNodetrueContent to show inside the anchor element
hrefstringtrueThe URL that the hyperlink points to

So any other props will be passed to the a element.

Extended types: React.AnchorHTMLAttributes<HTMLAnchorElement>


Last modified:

Add .bc-vertical-nav to an <nav> element.


Last modified:

Tertiary nav internals

Current or active item

Set aria-current="page" on the currently active item anchor. This will style the current/active anchor.

A backup .bc-vertical-nav__link--active class is also provided if this is not possible.

Disabled items

If an item anchor is disabled, set aria-disabled="true" on the anchor and omit its href. This will style the disabled anchor.

A backup .bc-vertical-nav--disabled class is also provided if this is not possible.

Adding additional children

Use the provided ‘aside’ class to add content within the anchor, such as spinners or counts.

Small text can also be added, eg. “Unconfigured” for disabled items.

Keep additional content short.

Note: the anchor is a flex container so consider wrapping nested sibling text nodes in span tags.

Tertiary nav placement

Place the tertiary nav left to the main content space (eg. inside a sidebar).

If the tertiary nav is placed to the right of the main content space, append the --leftactive container variant to flip the active and hover bar effect to the left.


Last modified:


Last modified:

The vertical navigation uses anchors and allows users to find other pages which share a similar topic or section. By default it supports three levels of nesting.

See also

Last modified: