Skip to content
7 Seventh UI CSS

Components

Bitbucket Figma

Breadcrumb

Plain CSS implementation of the Figma Breadcrumb section, node 2411:7111.

Name page Name page Name page Name page

Use ordered-list semantics and keep the current item marked with aria-current="page". Overflow menu behavior is consumer-owned.

<nav aria-label="Breadcrumb"> <ol class="sui-breadcrumb"> <li class="sui-breadcrumb__item"> <a class="sui-breadcrumb__link" href="#"><span class="sui-breadcrumb__label">Name page</span></a> <span class="sui-icon sui-icon--arrows-angle-right sui-breadcrumb__separator" aria-hidden="true"></span> </li> <li class="sui-breadcrumb__item"> <span class="sui-breadcrumb__current" aria-current="page"><span class="sui-breadcrumb__label">Current page</span></span> </li> </ol> </nav>