Bugcrowd Design System

Bugcrowd Design System

Search/

Subnav

Last modified:

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

Back to top

Example of Subnav - default

<BcSubnav>
  <BcSubnav.Item>
    <BcSubnav.Anchor href='#'>
      <BcIcons isInlined isParentColor name='brief' />
      <BcSubnav.Label>Brief & scope (link)</BcSubnav.Label>
    </BcSubnav.Anchor>
  </BcSubnav.Item>
  <BcSubnav.Item isActive>
    <BcSubnav.Anchor href='#'>
      <BcSubnav.Label>Known issues</BcSubnav.Label>
    </BcSubnav.Anchor>
  </BcSubnav.Item>
  <BcSubnav.Item>
    <BcSubnav.Button onClick={() => alert('nav item clicked')}>
      <BcIcons isInlined isParentColor name='activityFeed' />
      <BcSubnav.Label>ActivityFeed (btn)</BcSubnav.Label>
    </BcSubnav.Button>
  </BcSubnav.Item>
</BcSubnav>
Open in Playroom

React documentation

Last modified:

HTML

Last modified:

The Subnav is a list of items wrapped by the HTML <nav> element. Add .bc-subnav to an <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.

BcSubnav is parent wrapper component for subnav, it accepts following props.

BcSubnav props

BcSubnav wraps a list of BcSubnav.Item components.

PropTypeRequiredDefaultDescription
classNamestringfalseProvide custom class names to the underlying nav.bc-subnav element

BcSubnav.Item props

Use BcSubnav.Item should wrap either an anchor or button element.

BcSubnav.Anchor and BcSubnav.Button are convenient components which takes care of ensuring styles and correct anchor and button usage.

However, if a custom anchor or button implementation is required, then pass as children to BcSubnav.Item.

PropTypeRequiredDefaultDescription
isActivebooleanfalsefalseTo show an active item
childrenReactNodetrueTo show the item content

Any other props will be passed to the li element

Any extended types: React.HTMLAttributes<HTMLLIElement>

BcSubnav.Anchor props

BcSubnav.Anchor ensures that an href attribute is passed to the underlying anchor tag.

Use this component when you want your subnav item to behave like an anchor element - e.g page navigation.

PropTypeRequiredDefaultDescription
hrefstringtrueTo link the url with item
childrenReactNodetrueContent to show inside the anchor element

Any other props will be passed to the anchor element

Any extended types: React.AnchorHTMLAttributes<HTMLAnchorElement>

BcSubnav.Button props

BcSubnav.Button enforces a required onClick props and prevents the use of the disabled attributes.

BcSubnav should not have a disabled item; that said item should be conditionally rendered instead.

PropTypeRequiredDefaultDescription
childrenReactNodetrueContent to show inside the button element
disabledneverfalseThe disabled attribute will not do anything on the button because a disabled navigation item should not be rendered.
onClick() => voidtrueContent to show inside the button element

Any other props will be passed to the button element

Any extended types: React.ButtonHTMLAttributes<HTMLButtonElement>

BcSubnav.Label props

BcSubnav.Label wraps its children text content insides a span element with data-title attribute.

There are CSS styles which ensures that hovering and active state does not cause horizontal layout shifts.

PropTypeRequiredDefaultDescription
childrenstringtrueContent to show inside the span element

Accessibility

Last modified:

The secondary menu for sub-sections within a primary navigation section. BcSubnav Bugcrowd.design reference

Rationale

Last modified:

The Subnav uses anchors and buttons to navigate user among sub-sections within a primary navigation.

See also

Last modified: