Bugcrowd design system: Navigation

A encapsulation of links to other pages or parts within a page.

When building navigation sections, consider using the HTML5 <nav> element.

Guidance last updated: May 23, 2019

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.

Navbar positioning

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

React reference implementations

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

These are available as React components:

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
    • Link lists
    • Managed
  • Patterns:
    • Dropdown menu panel
Guidance last updated: Feb 12, 2019

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

Usage

Do not use as a primary navigation.

You can wrap the subnav in a panel. Use the --lined panel variant to retain the bottom border.

Rendered example of Subnav


The following example shows the subnav used within a panel, sans the fluid container:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Haml markup example of Subnav

%nav.container-fluid.bc-subnav
  .container-fluid__container
    %ul.bc-subnav__list
      %li.bc-subnav__item.bc-subnav__item--active
        %a{href: "#"}
          Brief & scope
      %li.bc-subnav__item
        %a{href: "#"}
          Known issues
      %li.bc-subnav__item
        %a{href: "#"}
          Integrations
      %li.bc-subnav__item
        %a{href: "#"}
          Manage team
      %li.bc-subnav__item
        %a{href: "#"}
          Additional fields

%br

%p
  The following example shows the subnav used within a panel, sans the fluid
  container:

.bc-panel.bc-panel--lined
  %nav.bc-subnav
    .bc-panel__header
      %ul.bc-subnav__list
        %li.bc-subnav__item.bc-subnav__item--active
          %a{href: "#"}
            Brief & scope
        %li.bc-subnav__item
          %a{href: "#"}
            Known issues
        %li.bc-subnav__item
          %a{href: "#"}
            Integrations
        %li.bc-subnav__item
          %a{href: "#"}
            Manage team
        %li.bc-subnav__item
          %a{href: "#"}
            Additional fields
  .bc-panel__main
    %p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Guidance last updated: May 24, 2019

A navigational aid which displays the location a user is on within a website’s structure.

Breadcrumb items

The endpoints linked and their order should reflect the hierarchy of the website. That is, the current page a user is on should be the child of a page it was navigable from.

Do not compose breadcrumbs dynamically from a user’s browsing/path history.

Do not make the final breadcrumb — the current page — an anchor. This is to avoid confusion given it would link to the page the user is already on. An alternative would be to use an anchor in conjunction with aria-current="page", however this may still cause confusion.

Do not use breadcrumbs on the top-level page where there would only be the one item, eg the homepage.

Breadcrumb positioning

Breadcrumbs are best positioned within the page’s primary <header> element, when possible.

Breadcrumbs should sit between the primary navigation and the page title.

Visually, breadcrumbs should remain in proximity to primary navigation elements and the page title.

Breadcrumb markup

The breadcrumb container class should be applied on a <nav>, wrapping the list and its items.

Provide the <nav> with an aria-label (eg “Breadcrumb navigation”).

Use ordered lists (<ol>).

Use the --compact and --inline List component for the list styles.

Rendered example of Breadcrumbs

Haml markup example of Breadcrumbs

%nav.bc-breadcrumbs{'aria-label': 'Breadcrumb navigation'}
  %ol.bc-list.bc-list--inline.bc-list--compact
    %li
      %a{href: '#'}
        Home
    %li
      %a{href: '#'}
        Parent
    %li
      Current page

Stepped nav

Guidance last updated: Mar 25, 2019

A linear navigation component used for ordered steps.

Guidance on variants

  • --active anchor class for currently active step/page.
  • --complete anchor class for completed steps.
  • --disabled anchor class for unavailable steps.

Handling disabled steps

If steps are required to be completed in order, use the --disabled variant to disable steps that should not be skipped to.

Do ensure the href is omitted and aria-disabled is set to true.

Dependencies

  • bc-panel
  • bc-list

Rendered example of Stepped nav

Haml markup example of Stepped nav

.bc-panel.bc-panel--lined.bc-panel--shadow
  .bc-panel__header
    %h5.bc-panel__title
      How to make pancakes
  .bc-panel__main
    %ol.bc-stepped-nav.bc-list.bc-list--numbered
      %li
        %a.bc-stepped-nav__step.bc-stepped-nav__step--complete
          Crack egg into mixing bowl
      %li
        %a.bc-stepped-nav__step.bc-stepped-nav__step--complete
          Add flour and milk
      %li
        %a.bc-stepped-nav__step.bc-stepped-nav__step--complete
          Whisk everything together
      %li
        %a.bc-stepped-nav__step.bc-stepped-nav__step--active
          Heat oil in frypan
      %li
        %a.bc-stepped-nav__step.bc-stepped-nav__step--disabled{'aria-disabled':'true'}
          Ladle batter in a circular shape
      %li
        %a.bc-stepped-nav__step.bc-stepped-nav__step--disabled{'aria-disabled':'true'}
          Cook and flip pancake
      %li
        %a.bc-stepped-nav__step.bc-stepped-nav__step--disabled{'aria-disabled':'true'}
          Serve immediately

Vertical nav

Guidance last updated: May 24, 2019

Vertical navigation component used for third-level navigation.

Vertical nav features

  • __link-count class for right-aligned counts
  • --active anchor item class for currently active pages
  • --disabled anchor item class for unavailable links

When handling disabled anchors ensure the href is omitted and aria-disabled is set to true.

Rendered example of Vertical nav

Haml markup example of Vertical nav

%nav.bc-vertical-nav
  %ul.bc-link-list
    %li
      %a.bc-vertical-nav__link{href: 'javascript:void(0)'}
        Inactive navigation item
    %li
      %a.bc-vertical-nav__link.bc-vertical-nav__link--active{href: 'javascript:void(0)'}
        Active navigation item with count
        %span.bc-vertical-nav__link-count
          3
    %li
      %a.bc-vertical-nav__link.bc-vertical-nav__link--disabled(aria-disabled='true'){tabindex: '-1'}
        Disabled navigation item
        %small
          (Unconfigured)

Pagination

Guidance last updated: Mar 25, 2019

Use pagination controls to provide navigation for content that is paginated.

The pagination pattern has two functions:

  1. As an interactive navigation
  2. As an indicator of where the user is within the paginated list index, providing via <output>:
    • the current range of items presented on the page;
    • from the total number of items in the paginated index.

Pagination usability and accessibility

While <ol> would be suitable here given the linearity implied, use un-ordered lists (<ul>).

Non-visual assistive technologies (eg screen readers) commonly preface <ol> list items with their lexical position. This results in first announcing the lexical count of the list item, which will not align with the page count due to the [ellipsis] range indicators, and the First/Last/Prev/Next, controls.

Set aria-hidden="true" on the list items that contain the range indicators, as these are entirely superfluous — and may cause confusion — to non-visual users. This does not visually hide the element.

Omit the jump control links — first/prev and next/last — when on the first and last page of listings respectively.

Provide a maximum of three pages prior to and after the current page; do not list every possible page.

Rendered example of Pagination

Haml markup example of Pagination

%nav.bc-pagination
  %span.bc-pagination__label{id: 'program-pagination-label'}
    Program listing pagination
  %ul.bc-pagination__list{role: 'navigation', 'aria-labelledby': 'program-pagination-label'}
    %li.bc-pagination__item.bc-pagination__item--prior
      %ul
        %li.bc-pagination__item.bc-pagination__item--first
          %a.bc-pagination__link{href: '/1'}
            First
        %li.bc-pagination__item.bc-pagination__item--prev
          %a.bc-pagination__link{href: '/3', rel: 'prev'}
            Prev
    %li.bc-pagination__item.bc-pagination__item--page
      %a.bc-pagination__link{href: '/1'}
        %span.bc-pagination__label Page
        1
    %li.bc-pagination__item.bc-pagination__item--page(aria-hidden='true')
      %span
        &hellip;
    %li.bc-pagination__item.bc-pagination__item--page
      %a.bc-pagination__link{href: '/3', rel: 'prev'}
        %span.bc-pagination__label Page
        3
    %li.bc-pagination__item
      %span.bc-pagination__current
        %span.bc-pagination__label Page
        4
    %li.bc-pagination__item.bc-pagination__item--page
      %a.bc-pagination__link{href: '/5', rel: 'next'}
        %span.bc-pagination__label Page
        5
    %li.bc-pagination__item.bc-pagination__item--page(aria-hidden='true')
      %span
        &hellip;
    %li.bc-pagination__item.bc-pagination__item--page
      %a.bc-pagination__link{href: '/11'}
        %span.bc-pagination__label Page
        11
    %li.bc-pagination__item.bc-pagination__item--after
      %ul
        %li.bc-pagination__item.bc-pagination__item--next
          %a.bc-pagination__link{href: '/3', rel: 'next'}
            Next
        %li.bc-pagination__item.bc-pagination__item--last
          %a.bc-pagination__link{href: '/3', rel: 'next'}
            Last
  %output.bc-pagination__count
    %span
      Viewing
    %span.bc-pagination__page-range
      76&thinsp;&ndash;&thinsp;100
    %span
      of
    %span.bc-pagination__total
      274

Skip-to

Guidance last updated: Mar 25, 2019

Visually-hidden ‘skip-links’ that are keyboard accessible.

Use to provide keyboard-accessible jump points to main sections of a page.

Typically skip-links link users to

  • Main navigation (the primary <nav>)
  • Main content container (eg <main>)

The links are established by pointing to the ID for each endpoint.

Avoid ID collisions: Ensure the page content ID does not conflict with the ID the Modals rely on.

Testing the rendered example: Skip-to links are visually hidden until they receive focus. Use the keyboard by pressing Tab to bring the links into :focus.

Visual location of skip-links: Upon receiving :focus, skip-to links will always visually appear to the top left of the page, layered at the ‘overlay’ z-index context layer.