Breadcrumb // NETFRAME by Cybear Technologies

Hierarchical path navigation. Rendered as a <nav> + <ol> for correct landmark and list semantics.

Basic

BREADCRUMB

<nav aria-label="Breadcrumb">
<ol class="nf-breadcrumb">
  <li class="nf-breadcrumb-item">
    <a class="nf-breadcrumb-link" href="/">ROOT</a>
  </li>
  <li class="nf-breadcrumb-item">
    <a class="nf-breadcrumb-link" href="/getting-started/">DOCS</a>
  </li>
  <li class="nf-breadcrumb-item" aria-current="page">
    <span class="nf-breadcrumb-link nf-breadcrumb-current">BREADCRUMB</span>
  </li>
</ol>
</nav>

Deeper path

FOUR LEVELS

<nav aria-label="Breadcrumb">
<ol class="nf-breadcrumb">
  <li class="nf-breadcrumb-item">
    <a class="nf-breadcrumb-link" href="/">NETFRAME</a>
  </li>
  <li class="nf-breadcrumb-item">
    <a class="nf-breadcrumb-link" href="/getting-started/">DOCS</a>
  </li>
  <li class="nf-breadcrumb-item">
    <a class="nf-breadcrumb-link" href="/theming/">THEMING</a>
  </li>
  <li class="nf-breadcrumb-item" aria-current="page">
    <span class="nf-breadcrumb-link nf-breadcrumb-current">BREADCRUMB</span>
  </li>
</ol>
</nav>

Class reference

Class	Description
`nf-breadcrumb`	`<ol>` wrapper — flex row with `/` separators
`nf-breadcrumb-item`	`<li>` — adds `/` separator via `::after` (except last)
`nf-breadcrumb-link`	Anchor or span inside each item
`nf-breadcrumb-current`	Highlights the current page — disables pointer events