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

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

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:

• ☞ Portal’s Navbar example
• ☞ Tracker’s Navbar example

These share the same Navbar component.

Menu contents

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.

Navbar dependencies

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

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