Navigation — Interplanetary UI

Nav List

Horizontal and vertical navigation lists.

Horizontal

Vertical

Code

<!-- Horizontal -->
<nav class="ip-nav-list">
  <a href="#">Home</a>
  <a href="#" class="active">Products</a>
  <a href="#">About</a>
</nav>

<!-- Vertical -->
<nav class="ip-nav-list-vertical">
  <a href="#">Dashboard</a>
  <a href="#" class="active">Settings</a>
  <a href="#">Profile</a>
</nav>

Breadcrumbs

Show current location in site hierarchy.

Code

<nav class="ip-breadcrumbs">
  <a href="#">Home</a>
  <span class="ip-breadcrumbs-separator">/</span>
  <a href="#">Components</a>
  <span class="ip-breadcrumbs-separator">/</span>
  <span class="ip-breadcrumbs-current">Navigation</span>
</nav>

Pagination

Navigate between pages of content.

Code

<nav class="ip-pagination">
  <a href="#" class="ip-pagination-item">←</a>
  <a href="#" class="ip-pagination-item">1</a>
  <a href="#" class="ip-pagination-item active">2</a>
  <a href="#" class="ip-pagination-item">3</a>
  <a href="#" class="ip-pagination-item">→</a>
</nav>

<!-- Rounded variant -->
<nav class="ip-pagination ip-rounded">...</nav>

Dropdown

Expandable menu for actions or navigation. Requires dropdown.js.

Code

<div class="ip-dropdown" data-dropdown>
  <button class="ip-dropdown-trigger">
    <span>Actions</span>
    <span class="ip-dropdown-arrow">
      <svg class="ip-dropdown-arrow-down">...</svg>
      <svg class="ip-dropdown-arrow-up">...</svg>
    </span>
  </button>
  <div class="ip-dropdown-menu">
    <a href="#" class="ip-dropdown-item">Edit</a>
    <a href="#" class="ip-dropdown-item">Delete</a>
  </div>
</div>

Nav Group

Section divider for grouping navigation items with a label.

Main

Settings

Code

<div class="ip-nav-group">
  <div class="ip-nav-group-label">Main</div>
  <nav class="ip-nav-list-vertical">
    <a href="#" class="active">Dashboard</a>
    <a href="#">Analytics</a>
    <a href="#">Reports</a>
  </nav>
</div>

<div class="ip-nav-group">
  <div class="ip-nav-group-label">Settings</div>
  <nav class="ip-nav-list-vertical">
    <a href="#">Profile</a>
    <a href="#">Account</a>
  </nav>
</div>

Navbar

Example header navigation layouts using the component primitives.

Simple

Brand

Code

<header class="flex items-center justify-between border-b border-secondary pb-2">
  <span class="font-display text-sm text-accent uppercase">Brand</span>
  <nav class="ip-nav-list">
    <a href="#">Home</a>
    <a href="#" class="active">Products</a>
    <a href="#">About</a>
  </nav>
</header>

With Actions

Brand

Code

<header class="flex items-center justify-between border-b border-secondary pb-2">
  <div class="flex items-center gap-4">
    <span class="font-display text-sm text-accent uppercase">Brand</span>
    <nav class="ip-nav-list">
      <a href="#" class="active">Dashboard</a>
      <a href="#">Settings</a>
    </nav>
  </div>
  <div class="flex items-center gap-2">
    <button class="ip-btn">Sign In</button>
    <button class="ip-btn-primary">Sign Up</button>
  </div>
</header>