Navigation — Core — Vanduo

Navigation

Catalog of Vanduo's navigation primitives — breadcrumbs, pagination, navbar, sidenav, and sticky. Each component has its own dedicated page for full API + demos; this page is a quick-reference index.

Components

Breadcrumbs
Hierarchical trail showing the current page within a section.
Pagination
Static or JS-driven page navigation.
Navbar
Top-of-page brand + links container with sticky/glass variants.
Sidenav
Vertical sidebar nav with active-section highlight.
Sticky
Make any element stick to a viewport edge on scroll.

Breadcrumbs

<nav class="vd-breadcrumbs" aria-label="Breadcrumb">
  <ol class="vd-breadcrumb">
    <li class="vd-breadcrumb-item"><a href="#">Home</a></li>
    <li class="vd-breadcrumb-item"><a href="#">Library</a></li>
    <li class="vd-breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Pagination (CSS only)

<!-- CSS-only pagination (server-rendered) -->
<nav aria-label="Page navigation">
  <ul class="vd-pagination">
    <li class="vd-pagination-item">
      <a href="#" class="vd-pagination-link" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="vd-pagination-item"><a href="#" class="vd-pagination-link">1</a></li>
    <li class="vd-pagination-item"><a href="#" class="vd-pagination-link">2</a></li>
    <li class="vd-pagination-item active"><a href="#" class="vd-pagination-link">3</a></li>
    <li class="vd-pagination-item"><a href="#" class="vd-pagination-link">4</a></li>
    <li class="vd-pagination-item"><a href="#" class="vd-pagination-link">5</a></li>
    <li class="vd-pagination-item">
      <a href="#" class="vd-pagination-link" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

<!-- JavaScript-driven pagination -->
<nav aria-label="Page navigation (interactive)">
  <ul class="vd-pagination"
      data-pagination
      data-total-pages="12"
      data-current-page="3"
      data-max-visible="7"></ul>
</nav>

Pagination (JavaScript)

Add data-pagination on the list; set data-total-pages, data-current-page, and optional data-max-visible.

Navbar (glass)

<header class="vd-navbar vd-navbar-fixed vd-navbar-glass">
  <div class="vd-navbar-container">
    <a href="/" class="vd-navbar-brand">Brand</a>
    <nav class="vd-navbar-nav">
      <a href="/docs" class="vd-nav-link">Docs</a>
      <a href="/about" class="vd-nav-link">About</a>
    </nav>
  </div>
</header>

Sidenav

<aside class="vd-sidenav">
  <ul class="vd-sidenav-list">
    <li class="vd-sidenav-item active">
      <a href="#" class="vd-sidenav-link">Section 1</a>
    </li>
    <li class="vd-sidenav-item">
      <a href="#" class="vd-sidenav-link">Section 2</a>
    </li>
    <li class="vd-sidenav-item">
      <a href="#" class="vd-sidenav-link">Section 3</a>
    </li>
  </ul>
</aside>

See also