CSS Tags
Search

Theme
Theme creator

Tune semantic inputs, preview them live, then export a trailing CSS layer.

Starting points
Color
Shape and spacing
Typography
Export theme

Load the generated file after css-tags.

Using documentation defaults.
GitHub

Navigation Component

Responsive navbar, sidebar, breadcrumbs, and pagination patterns built from semantic navigation landmarks.

Overview

The navigation component provides responsive navbar and sidebar components with mobile-first design. It uses container queries for responsive behavior and scoped styling to prevent conflicts.

Key Features

  • Public host aliases: Custom elements, data-* hosts, and classes share one API
  • Responsive Design: Container queries for mobile adaptation
  • Two Variants: Navbar and sidebar layouts
  • Mobile Menu: Collapsible navigation for small screens
  • Design Tokens: Integrated with the framework’s color system

Components

Horizontal navigation bar with brand, links, and mobile toggle.

Responsive navigation bar

Resize the preview: links wrap into a full-width column while remaining available without JavaScript.
Northstar

Features

  • Optional Sticky Positioning: Add data-sticky, .is-sticky, or sticky
  • Brand Area: For logo or site title
  • Navigation Links: Horizontal list of links
  • Mobile Toggle: Opt-in collapsible menu for small containers
  • Responsive: Links stack vertically on mobile

Vertical navigation sidebar with scrollable content.

Scrollable application sidebar

The host owns its height and scrolls independently when its navigation is longer than the available space.

Features

  • Configurable Width: --sidebar-width defaults to 250px
  • Scrollable: Auto-scroll for long navigation lists
  • Section Grouping: Support for navigation sections
  • Link Styling: Hover effects and active states

Host options

  • Navbar: <nav-navbar>, [data-navbar], .navbar, or .nav-navbar
  • Sidebar: <nav-sidebar>, [data-sidebar], .sidebar, or .nav-sidebar
  • Sticky navbar: sticky, [data-sticky], or .is-sticky
  • Collapsible enhancement: [data-collapsible] or .is-collapsible

Structure

<nav-navbar>
  <div class="nav-brand">Brand</div>
  <ul class="nav-links">
    <li><a href="#" class="nav-link">Home</a></li>
    <li><a href="#" class="nav-link">About</a></li>
  </ul>
  <button class="nav-toggle">☰</button>
</nav-navbar>
<nav-sidebar>
  <ul class="sidebar-nav">
    <li><a href="#" class="sidebar-link">Dashboard</a></li>
    <li><a href="#" class="sidebar-link">Settings</a></li>
    <li class="sidebar-section">Admin</li>
    <li><a href="#" class="sidebar-link">Users</a></li>
  </ul>
</nav-sidebar>

Responsive Behavior

Mobile Navbar (< 34rem container width)

  • Links stack vertically and remain visible by default, preserving navigation without JavaScript.
  • Add data-collapsible or .is-collapsible to opt into a toggle-enhanced menu.
  • The toggle’s aria-expanded="true" state or .active on the link list reveals the menu.
  • The menu stays in normal flow rather than covering nearby content.

Desktop Navbar (> 34rem container width)

  • Horizontal link layout
  • Toggle button hidden
  • Inline navigation display

Styling Details

Common Properties

  • Colors: Uses design tokens for backgrounds, text, and borders
  • Spacing: Consistent padding and margins
  • Typography: Inherited font settings
  • Transitions: Smooth hover effects
  • Layout: Flexbox with space-between justification
  • Position: Sticky top with high z-index
  • Border: Bottom border for separation
  • Layout: Flex column with full height
  • Position: Sticky top with border right
  • Overflow: Auto-scroll for content

Component tokens

Navbar geometry and surfaces:

  • --nav-min-height, --nav-padding, --nav-radius
  • --nav-background, --nav-border-color, --nav-z-index
  • --nav-links-gap, --nav-link-padding-block, --nav-link-padding-inline
  • --nav-link-color, --nav-link-hover-color, --nav-link-hover-background
  • --nav-menu-background, --nav-menu-border-color

Sidebar sizing and navigation:

  • --sidebar-width or --width
  • --sidebar-height, --sidebar-max-height
  • --nav-sidebar-padding, --nav-sidebar-background, --nav-sidebar-border-color
  • --sidebar-link-color, --sidebar-link-hover-color, --sidebar-link-hover-background
  • --sidebar-section-color, --sidebar-section-margin-top

Utility Classes

  • .nav-link-active: Active navigation link styling
  • .nav-links.active: Shows mobile menu (JavaScript-controlled)

Browser support

The responsive navbar uses container queries and CSS nesting. In browsers without container-query support, it remains a usable horizontal, wrapping navigation list; the semantic links do not depend on the responsive styling.

JavaScript Integration

Only the opt-in data-collapsible mobile menu requires JavaScript. Without that attribute, links remain visible at every width. Enhancement should:

  • Toggle .active class on .nav-links
  • Handle toggle button clicks
  • Manage focus and accessibility

Accessibility

  • Keyboard Navigation: Focus management for mobile menu
  • Screen Readers: Proper semantic structure
  • Focus Indicators: Visible focus outlines
  • ARIA: Collapsible toggles must keep aria-expanded synchronized with the menu

Use Cases

  • Website Navigation: Main site navigation
  • Dashboard Layouts: Admin panels and data apps
  • Mobile Apps: Responsive web app navigation
  • Documentation Sites: Section-based navigation

Use a native navigation landmark; nav.breadcrumbs and nav[data-breadcrumbs] are equivalent.

Wrapping breadcrumbs

 
<nav class="breadcrumbs" aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/components/">Components</a></li>
    <li><span aria-current="page">Navigation</span></li>
  </ol>
</nav>

Separators are decorative generated content, so assistive technology announces only the labels. Theme the pattern with --breadcrumbs-gap, --breadcrumbs-separator, --breadcrumbs-color, --breadcrumbs-hover-color, --breadcrumbs-current-color, and --breadcrumbs-font-size.

Pagination

Use anchors for location-changing pages. Buttons are appropriate for client-side data grids that keep the same URL.

Responsive pagination

 
<nav data-pagination aria-label="Pagination">
  <a class="pagination-previous" href="?page=2">Previous</a>
  <ol>
    <li><a href="?page=2">2</a></li>
    <li><a href="?page=3" aria-current="page">3</a></li>
    <li><a href="?page=4">4</a></li>
  </ol>
  <a class="pagination-next" href="?page=4">Next</a>
</nav>

Add data-size="compact" for dense interfaces or data-surface="footer" for an opt-in divider. A disabled anchor must omit href and use aria-disabled="true".