CSS: breadcrumb

.instui-breadcrumb — A breadcrumb trail with / separators; the last crumb is the current page.

Source: breadcrumb.css

Accessibility

Wrap the trail in <nav aria-label> and mark the current page's crumb with aria-current="page".

Usage

@import "@pantoken/components/components.css";
@import "@pantoken/components/breadcrumb.css";

Examples

<nav class="instui-breadcrumb" aria-label="Breadcrumb">
  <span class="item">
    <a href="#"><span class="instui-icon -icon-house"></span> Home</a>
  </span>
  <span class="item"><a href="#">Guides</a></span>
  <span class="item"><a href="#">Components</a></span>
  <span class="item" aria-current="page">Breadcrumb</span>
</nav>

HomeGuidesComponentsBreadcrumb

Structure

.instui-breadcrumb
  .item
    a
      [class*="-icon-"] (0..1)

flowchart TD n0[".instui-breadcrumb"]:::cssdoc-root n1(".item"):::cssdoc-part n2("a"):::cssdoc-part n3("[class*="-icon-"]"):::cssdoc-part n2 -.->|0..1| n3 n1 --> n2 n0 --> n1 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Modifiers

Modifier	Description
.-icon-*	Render a glyph icon in a crumb link (for example, home in the first crumb).
.-size-large	Large. Long-form alias of -size-lg.
.-size-lg	Large.
.-size-sm	Small.
.-size-small	Small. Long-form alias of -size-sm.

Parts

Part	Description
.item	A crumb; the last one is the current page.

Pseudo-elements

Pseudo-element	Description
::after	Renders the / separator after every crumb except the last.

Tokens consumed

Token	Type	Value
--instui-color-text-muted	<color>	light-dark(#576773, #AAB0B5)LightDark
--instui-component-breadcrumb-gap-lg	<length>	0.5rem
--instui-component-breadcrumb-gap-md	<length>	0.25rem
--instui-component-breadcrumb-gap-sm	<length>	0.125rem
--instui-component-link-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-link-font-size-lg	<length>	1.75rem
--instui-component-link-font-size-md	<length>	1rem
--instui-component-link-font-size-sm	<length>	0.875rem
--instui-component-link-text-color	<color>	light-dark(#2369A4, #7FB4F1)LightDark
--instui-component-link-text-hover-color	<color>	light-dark(#1A5281, #ACCDF7)LightDark

Browser support

• Contains its element styles with the CSS @scope at-rule; needs a recent Chromium, Firefox, or Safari.

Related

• link — Styles each crumb as a link.