Example of Vertical nav - default
<BcVerticalNav> <BcVerticalNav.Item> <BcVerticalNav.Anchor href='#'>Navigation item</BcVerticalNav.Anchor> </BcVerticalNav.Item> <BcVerticalNav.Item isActive> <BcVerticalNav.Anchor href='#'> Navigation active item </BcVerticalNav.Anchor> </BcVerticalNav.Item> <BcVerticalNav.Item isDisabled> <BcVerticalNav.Anchor href='#'> Navigation disabled item </BcVerticalNav.Anchor> </BcVerticalNav.Item> </BcVerticalNav>
React documentation
Last modified:
BcVerticalNav is parent wrapper component for vertical-nav, it accepts following props.
| Prop | Type | Required? | Value | Default | Description |
|---|---|---|---|---|---|
| variant | string | false | leftActive | To set active item border on the left or right | |
| className | string | false | To add additional classes |
Any other props will be passed to the nav element
Extended types:
React.HTMLAttributes<HTMLUListElement>
Sublist
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
| Prop | Type | Required? | Values | Default | Description |
|---|---|---|---|---|---|
| level | Level | false | primary, secondary or tertiary | primary | Controls the nested level of the list |
Extended types: React.HTMLAttributes<HTMLUListElement>
Item
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.
| Prop | Type | Required? | Default | Description |
|---|---|---|---|---|
| isActive | boolean | false | false | To show an active vertical nav item |
| isDisabled | boolean | false | false | To disable a vertical nav item |
| children | string or ReactElement | true | To show the item content | |
| className | string | false | To add additional classes to the parent |
Any other props will be passed to the li element
Extended types: React.HTMLAttributes<HTMLLIElement>
Anchor
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.
| Prop | Type | Required? | Default | Description |
|---|---|---|---|---|
| children | ReactNode | true | Content to show inside the anchor element | |
| href | string | true | The URL that the hyperlink points to |
So any other props will be passed to the a element.
Extended types: React.AnchorHTMLAttributes<HTMLAnchorElement>
HTML
Last modified:
Add .bc-vertical-nav to an <nav> element.
Design
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.
Accessibility
Last modified:
Rationale
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: