Bugcrowd Design System

Bugcrowd Design System

Search/

Stepped Nav

Last modified:

A linear navigation component used for ordered steps.

Back to top

 
<div class="bc-panel bc-panel--lined bc-panel--shadow">
  <div class="bc-panel__header">
    <h5 class="bc-panel__title">Set up your Bugcrowd account</h5>
  </div>
  <div class="bc-panel__main">
    <ol class="bc-stepped-nav bc-list bc-list--numbered">
      <li class="bc-stepped-nav__step bc-stepped-nav__step--complete">
        <a class="bc-stepped-nav__link" href="#"> Add your email address </a>
      </li>
      <li class="bc-stepped-nav__step bc-stepped-nav__step--complete">
        <a class="bc-stepped-nav__link" href="#"> Choose a username </a>
      </li>
      <li class="bc-stepped-nav__step bc-stepped-nav__step--complete">
        <a class="bc-stepped-nav__link" href="#"> Upload an avatar image </a>
      </li>
      <li class="bc-stepped-nav__step bc-stepped-nav__step--complete">
        <a class="bc-stepped-nav__link" href="#">
          Secure your account with 2FA
        </a>
      </li>
      <li class="bc-stepped-nav__step bc-stepped-nav__step--current">
        <a aria-current="step" class="bc-stepped-nav__link" href="#">
          Select a program to hack on
        </a>
      </li>
      <li class="bc-stepped-nav__step bc-stepped-nav__step--disabled">
        <a aria-disabled="true" class="bc-stepped-nav__link"> Start hacking </a>
      </li>
      <li class="bc-stepped-nav__step bc-stepped-nav__step--disabled">
        <a aria-disabled="true" class="bc-stepped-nav__link">
          Submit your first vulnerability
        </a>
      </li>
      <li class="bc-stepped-nav__step bc-stepped-nav__step--disabled">
        <a aria-disabled="true" class="bc-stepped-nav__link">
          Wait for your vulnerability to be triaged
        </a>
      </li>
      <li class="bc-stepped-nav__step bc-stepped-nav__step--disabled">
        <a aria-disabled="true" class="bc-stepped-nav__link">
          Receive your first reward
        </a>
      </li>
      <li class="bc-stepped-nav__step bc-stepped-nav__step--disabled">
        <a aria-disabled="true" class="bc-stepped-nav__link"> Keep hacking! </a>
      </li>
    </ol>
  </div>
</div>
Open in Playroom

React documentation

Last modified:

ℹ️ This feature doesn’t have a corresponding React component yet.

HTML

Last modified:

Add .bc-stepped-nav to an ordered list.

Design

Last modified:

List spacing

Use .bc-list--compact or .bc-list--spacious to change vertical spacing between list items. See List for more information.

Stepped nav __step variants

  • Use --complete class for completed steps.
  • Use --current class for the selected step.

Stepped nav anchor accessibility

  • Use aria-current="step" attribute for the selected step/page.

Handling disabled nav anchor steps

If steps are required to be completed in order and should not be skipped, implementers should disable anchors by setting:

  • href value to null
  • aria-disabled="true".

Accordion content for each step

The accordion toggle button is designed to allow the user to expand nested accordions without navigating to each step/page.

When controlling accordion content with the button:

  • Use aria-controls attribute to link with accordion content
  • Set aria-expanded attribute to true when the accordion is visible, or false when hidden.

When displaying accordion content:

  • Set aria-hidden attribute to false to display accordion content, or set to false to hide content.
  • Assign a unique id to link accordion content with the button.

Accessibility

Last modified:

Rationale

Last modified:

See also

Last modified: