Navigation

A collection of navigation components including navbar, tabs, pills, breadcrumbs, and pagination. Part of the @thenewcss/navigation addon package.

Installation

npm install @thenewcss/navigation

Tabs

Use .nav-tabs on a .nav for underline-style tab navigation.

Preview

<ul class="nav nav-tabs">
  <li><a class="nav-link active" href="#">Active</a></li>
  <li><a class="nav-link" href="#">Link</a></li>
  <li><a class="nav-link disabled" href="#">Disabled</a></li>
</ul>

Pills

Use .nav-pills for pill-shaped active state indicators.

Preview

<ul class="nav nav-pills">
  <li><a class="nav-link active" href="#">Active</a></li>
  <li><a class="nav-link" href="#">Link</a></li>
</ul>

Navbar

A responsive navigation bar. Uses native <details>/<summary> for CSS-only mobile toggle.

Preview

<nav class="navbar">
  <a class="navbar-brand" href="#">Brand</a>
  <details class="navbar-toggle">
    <summary aria-label="Toggle navigation">☰</summary>
    <div class="navbar-collapse">
      <ul class="navbar-nav">
        <li><a class="nav-link active" href="#">Home</a></li>
        <li><a class="nav-link" href="#">Features</a></li>
      </ul>
    </div>
  </details>
</nav>

Breadcrumb

Indicate the current page's location within a navigational hierarchy using separators.

Preview

<nav>
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active">Data</li>
  </ol>
</nav>

Pagination

Page navigation with active and disabled states.

Preview

<ul class="pagination">
  <li class="page-item disabled"><a class="page-link" href="#">«</a></li>
  <li class="page-item active"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">»</a></li>
</ul>

Class Reference

Nav

Class	Description
`.nav`	Flex container for navigation links.
`.nav-link`	Navigation link with hover/active/disabled states.
`.nav-tabs`	Tab-style nav with underline active indicator.
`.nav-pills`	Pill-style nav with rounded active background.

Navbar

Class	Description
`.navbar`	Responsive navigation bar with flex layout.
`.navbar-brand`	Brand link/text with bold styling.
`.navbar-nav`	Navigation list inside navbar.
`.navbar-toggle`	CSS-only mobile toggle using details/summary.
`.navbar-collapse`	Collapsible content area that shows/hides on mobile.
`.navbar-dark`	Dark color scheme with light text.

Breadcrumb & Pagination

Class	Description
`.breadcrumb`	Flex container for breadcrumb items.
`.breadcrumb-item`	Individual breadcrumb with "/" separator via ::before.
`.pagination`	Flex container for page links.
`.page-item`	Pagination item wrapper with active/disabled states.
`.page-link`	Clickable page link with border and hover styles.