Bugcrowd Design System

Bugcrowd Design System

Search/

Navbar

Last modified:

The main menu for the primary sections or views of the site or application. Use to allow users to navigate between main sections of the site or app.

Example of Navbar - default

<BcNavbar>
    <BcNavbar.Item className='bc-nav__item--hex'>
      <a
        className='bc-icon'
        href='#'
        aria-label='Home'
      >
        <span aria-hidden>Home</span>
      </a>
    </BcNavbar.Item>
    <BcNavbar.Item className='bc-nav__item--primary-menu'>
      <div className='bc-body bc-body--dark'>
        <ul className='bc-list bc-list--inline bc-list--compact'>
          <BcNavbar.Item active>
            <a href='#'>
              Dashboard
            </a>
          </BcNavbar.Item>
          <BcNavbar.Item>
            <a href='#'>Programs</a>
          </BcNavbar.Item>
        </ul>
      </div>
    </BcNavbar.Item>
  </BcNavbar>
Open in Playroom

React documentation

Last modified:

BcNavbar is the basic scaffold for the Primary navigation for all Platform users.

Props

  • BcNavbarProps

    • extends <nav> HTML element

  • Item props

    • extends list item (<li>) HTML element
    • active boolean to give “active” style to Item

HTML

Last modified:

The Primary navigation is a list of anchors and menu buttons wrapped by the HTML <nav> element.

Design

Last modified:

The navbar is built to sit inside the Header container, which is given a fixed position.

There are two reference implementations --- one for Portal and the other for Tracker.

See examples below:

These share the same Navbar component.

The menu contains:

  • The Bugcrowd ‘hex’ logo as a link to home
  • A primary navigation, broken up into:
    • PrimaryMenuMobile, as a dropdown menu accessible from a hamburger menu panel button, hidden at ≥md breakpoint
    • A copy of the menu, displayed only ≥md breakpoints
  • A user menu grouping, including (if signed-in):
    • An icon (bell) link to the user’s notifications + unread marker (Tracker only), which will also display the unread marker if it is passed the string ‘1000+‘
    • The user’s main dropdown menu (UserMenu), as button holding their avatar

Active/current page or section handling

A LinkItem receives a modifier class if the user is currently on the page for said item. This also applies if the user is deeper within a given top-level section.

You can override/supplement this functionality by setting your own activePathMatcher using regular expressions.

For an example, see the ‘Researchers’ primary menu item defined in NavbarTrackerExample.

  • Containers:
    • Grid
    • Header
    • Panels
  • Components:
    • Avatars
    • Buttons
    • Managed
  • Patterns:
    • Dropdown menu panel

Accessibility

Last modified:

Rationale

Last modified:

See also

Last modified:

  • Nav (Navigation)
  • Sub nav (Navigation)
  • Vertical nav (Navigation)
  • Nav ToC (Navigation)