Browse Components
Navigation
Organize top-level destinations with optional disclosure panels.
Basic
Five destinations with three disclosure panels. Left and Right move between top-level items; Down opens the panel.
View Code
<nav class="navigation" data-navigation="" aria-label="Main">
<ul class="navigation-list">
<li class="navigation-item">
<a class="navigation-link" href="/" aria-current="page">
Home
</a>
</li>
<li class="navigation-item">
<details class="navigation-group">
<summary class="navigation-trigger">
Components
</summary>
<div class="navigation-panel">
<ul>
<li>
<a href="/components/button">
Button
</a>
</li>
<li>
<a href="/components/select">
Select
</a>
</li>
<li>
<a href="/components/dialog">
Dialog
</a>
</li>
<li>
<a href="/components/navigation">
Navigation
</a>
</li>
</ul>
</div>
</details>
</li>
<li class="navigation-item">
<details class="navigation-group">
<summary class="navigation-trigger">
Learn
</summary>
<div class="navigation-panel">
<ul>
<li>
<a href="/docs/install">
Install
</a>
</li>
<li>
<a href="/docs/themes">
Themes
</a>
</li>
<li>
<a href="/docs/ai">
AI Guide
</a>
</li>
</ul>
</div>
</details>
</li>
<li class="navigation-item">
<a class="navigation-link" href="/blocks">
Blocks
</a>
</li>
<li class="navigation-item">
<details class="navigation-group">
<summary class="navigation-trigger">
Resources
</summary>
<div class="navigation-panel">
<ul>
<li>
<a href="/icons">
Icons
</a>
</li>
<li>
<a href="/css">
CSS
</a>
</li>
<li>
<a href="/docs/themes">
Themes
</a>
</li>
</ul>
</div>
</details>
</li>
</ul>
</nav>Sections
Group related destinations across three disclosure panels with short supporting text.
View Code
<nav class="navigation" data-navigation="" aria-label="Documentation">
<ul class="navigation-list">
<li class="navigation-item">
<details class="navigation-group">
<summary class="navigation-trigger">
Learn
</summary>
<div class="navigation-panel">
<ul class="navigation-grid">
<li class="navigation-label">
Foundations
</li>
<li>
<a href="/docs/install">
<span>
Install
</span>
<span class="navigation-description">
Set up your first project.
</span>
</a>
</li>
<li>
<a href="/docs/building">
<span>
Building Interfaces
</span>
<span class="navigation-description">
Put the pieces together.
</span>
</a>
</li>
<li>
<a href="/docs/themes">
<span>
Themes
</span>
<span class="navigation-description">
Make the design your own.
</span>
</a>
</li>
<li>
<a href="/docs/ai">
<span>
AI Guide
</span>
<span class="navigation-description">
Build with clear AI guidance.
</span>
</a>
</li>
</ul>
</div>
</details>
</li>
<li class="navigation-item">
<details class="navigation-group">
<summary class="navigation-trigger">
Build
</summary>
<div class="navigation-panel">
<ul>
<li>
<a href="/docs/static-sites">
<span>
Static Sites
</span>
<span class="navigation-description">
Pages, partials and asset builds.
</span>
</a>
</li>
<li>
<a href="/docs/integrations">
<span>
Integrations
</span>
<span class="navigation-description">
Work with your framework.
</span>
</a>
</li>
<li>
<a href="/create">
<span>
Create a Kit
</span>
<span class="navigation-description">
Choose and export components.
</span>
</a>
</li>
</ul>
</div>
</details>
</li>
<li class="navigation-item">
<a class="navigation-link" href="/components">
Components
</a>
</li>
<li class="navigation-item">
<a class="navigation-link" href="/blocks">
Blocks
</a>
</li>
<li class="navigation-item">
<details class="navigation-group">
<summary class="navigation-trigger">
Explore
</summary>
<div class="navigation-panel">
<ul>
<li>
<a href="/icons">
Icons
</a>
</li>
<li>
<a href="/css">
CSS
</a>
</li>
<li>
<a href="/docs/themes">
Themes
</a>
</li>
</ul>
</div>
</details>
</li>
</ul>
</nav>Icon Links
Pair destinations with icons and short descriptions.
View Code
<nav class="navigation" data-navigation="" aria-label="Resources">
<ul class="navigation-list">
<li class="navigation-item">
<details class="navigation-group">
<summary class="navigation-trigger">
Explore
</summary>
<div class="navigation-panel ">
<ul class="navigation-grid">
<li>
<a class="navigation-card" href="/components">
<span class="icon" data-icon="grid" aria-hidden="true">
</span>
<span>
<span>
Components
</span>
<span class="navigation-description">
Controls for every screen.
</span>
</span>
</a>
</li>
<li>
<a class="navigation-card" href="/icons">
<span class="icon" data-icon="star" aria-hidden="true">
</span>
<span>
<span>
Icons
</span>
<span class="navigation-description">
Clear, consistent icons.
</span>
</span>
</a>
</li>
<li>
<a class="navigation-card" href="/css">
<span class="icon" data-icon="code" aria-hidden="true">
</span>
<span>
<span>
CSS
</span>
<span class="navigation-description">
Flexible layout utilities.
</span>
</span>
</a>
</li>
<li>
<a class="navigation-card" href="/docs/themes">
<span class="icon" data-icon="settings" aria-hidden="true">
</span>
<span>
<span>
Themes
</span>
<span class="navigation-description">
Colors and typography.
</span>
</span>
</a>
</li>
</ul>
</div>
</details>
</li>
<li class="navigation-item">
<details class="navigation-group">
<summary class="navigation-trigger">
Learn
</summary>
<div class="navigation-panel ">
<ul class="navigation-grid">
<li>
<a class="navigation-card" href="/docs/install">
<span class="icon" data-icon="grid" aria-hidden="true">
</span>
<span>
<span>
Install
</span>
<span class="navigation-description">
Start your first project.
</span>
</span>
</a>
</li>
<li>
<a class="navigation-card" href="/docs/building">
<span class="icon" data-icon="star" aria-hidden="true">
</span>
<span>
<span>
Building Interfaces
</span>
<span class="navigation-description">
Bring the pieces together.
</span>
</span>
</a>
</li>
<li>
<a class="navigation-card" href="/docs/integrations">
<span class="icon" data-icon="code" aria-hidden="true">
</span>
<span>
<span>
Integrations
</span>
<span class="navigation-description">
Work with your stack.
</span>
</span>
</a>
</li>
<li>
<a class="navigation-card" href="/docs/ai">
<span class="icon" data-icon="settings" aria-hidden="true">
</span>
<span>
<span>
AI Guide
</span>
<span class="navigation-description">
Build with clear guidance.
</span>
</span>
</a>
</li>
</ul>
</div>
</details>
</li>
<li class="navigation-item">
<details class="navigation-group">
<summary class="navigation-trigger">
Build
</summary>
<div class="navigation-panel ">
<ul class="navigation-grid">
<li>
<a class="navigation-card" href="/docs/static-sites">
<span class="icon" data-icon="code" aria-hidden="true">
</span>
<span>
<span>
Static Sites
</span>
<span class="navigation-description">
Pages and shared layouts.
</span>
</span>
</a>
</li>
<li>
<a class="navigation-card" href="/docs/integrations">
<span class="icon" data-icon="grid" aria-hidden="true">
</span>
<span>
<span>
Integrations
</span>
<span class="navigation-description">
Work with your stack.
</span>
</span>
</a>
</li>
<li>
<a class="navigation-card" href="/create">
<span class="icon" data-icon="settings" aria-hidden="true">
</span>
<span>
<span>
Create
</span>
<span class="navigation-description">
Compose your next page.
</span>
</span>
</a>
</li>
<li>
<a class="navigation-card" href="/docs/themes">
<span class="icon" data-icon="star" aria-hidden="true">
</span>
<span>
<span>
Themes
</span>
<span class="navigation-description">
Make the design yours.
</span>
</span>
</a>
</li>
</ul>
</div>
</details>
</li>
<li class="navigation-item">
<a class="navigation-link" href="/">
Home
</a>
</li>
<li class="navigation-item">
<a class="navigation-link" href="/create">
Create
</a>
</li>
</ul>
</nav>Featured Panel
A wide navigation panel with an introductory card, grouped links, and a footer.
View Code
<nav class="navigation" data-navigation="" aria-label="Platform">
<ul class="navigation-list">
<li class="navigation-item">
<details class="navigation-group">
<summary class="navigation-trigger">
Explore
</summary>
<div class="navigation-panel navigation-wide">
<div class="navigation-featured">
<aside class="navigation-feature">
<p>
Build your next idea.
</p>
<p class="muted">
A shared foundation for your website or app.
</p>
<a href="/docs/install">
Get Started
</a>
</aside>
<div>
<ul class="navigation-columns">
<li>
<a class="navigation-card" href="/components">
<span class="icon" data-icon="grid" aria-hidden="true">
</span>
<span>
<span>
Components
</span>
<span class="navigation-description">
Controls for every screen.
</span>
</span>
</a>
</li>
<li>
<a class="navigation-card" href="/icons">
<span class="icon" data-icon="star" aria-hidden="true">
</span>
<span>
<span>
Icons
</span>
<span class="navigation-description">
Clear, consistent icons.
</span>
</span>
</a>
</li>
<li>
<a class="navigation-card" href="/css">
<span class="icon" data-icon="code" aria-hidden="true">
</span>
<span>
<span>
CSS
</span>
<span class="navigation-description">
Flexible layout utilities.
</span>
</span>
</a>
</li>
<li>
<a class="navigation-card" href="/docs/themes">
<span class="icon" data-icon="settings" aria-hidden="true">
</span>
<span>
<span>
Themes
</span>
<span class="navigation-description">
Colors and typography.
</span>
</span>
</a>
</li>
</ul>
<div class="navigation-footer">
<a href="/docs/building">
Building Interfaces
</a>
<a href="/docs/ai">
AI Guide
</a>
<a href="/docs/integrations">
Integrations
</a>
</div>
</div>
</div>
</div>
</details>
</li>
<li class="navigation-item">
<details class="navigation-group">
<summary class="navigation-trigger">
Learn
</summary>
<div class="navigation-panel navigation-wide">
<div class="navigation-featured">
<aside class="navigation-feature">
<p>
Start with the essentials.
</p>
<p class="muted">
Practical guides for your next project.
</p>
<a href="/docs">
Read the Guide
</a>
</aside>
<div>
<ul class="navigation-columns">
<li>
<a class="navigation-card" href="/docs/install">
<span class="icon" data-icon="grid" aria-hidden="true">
</span>
<span>
<span>
Install
</span>
<span class="navigation-description">
Start your first page.
</span>
</span>
</a>
</li>
<li>
<a class="navigation-card" href="/docs/building">
<span class="icon" data-icon="star" aria-hidden="true">
</span>
<span>
<span>
Building Interfaces
</span>
<span class="navigation-description">
Bring the pieces together.
</span>
</span>
</a>
</li>
<li>
<a class="navigation-card" href="/docs/integrations">
<span class="icon" data-icon="code" aria-hidden="true">
</span>
<span>
<span>
Integrations
</span>
<span class="navigation-description">
Work with your stack.
</span>
</span>
</a>
</li>
<li>
<a class="navigation-card" href="/docs/ai">
<span class="icon" data-icon="settings" aria-hidden="true">
</span>
<span>
<span>
AI Guide
</span>
<span class="navigation-description">
Build with clear guidance.
</span>
</span>
</a>
</li>
</ul>
<div class="navigation-footer">
<a href="/components">
Components
</a>
<a href="/css">
CSS Utilities
</a>
<a href="/docs/themes">
Themes
</a>
</div>
</div>
</div>
</div>
</details>
</li>
<li class="navigation-item">
<details class="navigation-group">
<summary class="navigation-trigger">
Build
</summary>
<div class="navigation-panel navigation-wide">
<div class="navigation-featured">
<aside class="navigation-feature">
<p>
From idea to interface.
</p>
<p class="muted">
Compose pages with a shared design foundation.
</p>
<a href="/create">
Start Creating
</a>
</aside>
<div>
<ul class="navigation-columns">
<li>
<a class="navigation-card" href="/docs/static-sites">
<span class="icon" data-icon="code" aria-hidden="true">
</span>
<span>
<span>
Static Sites
</span>
<span class="navigation-description">
Pages and shared layouts.
</span>
</span>
</a>
</li>
<li>
<a class="navigation-card" href="/docs/integrations">
<span class="icon" data-icon="grid" aria-hidden="true">
</span>
<span>
<span>
Integrations
</span>
<span class="navigation-description">
Work with your stack.
</span>
</span>
</a>
</li>
<li>
<a class="navigation-card" href="/create">
<span class="icon" data-icon="settings" aria-hidden="true">
</span>
<span>
<span>
Create
</span>
<span class="navigation-description">
Compose your next page.
</span>
</span>
</a>
</li>
<li>
<a class="navigation-card" href="/docs/themes">
<span class="icon" data-icon="star" aria-hidden="true">
</span>
<span>
<span>
Themes
</span>
<span class="navigation-description">
Make the design yours.
</span>
</span>
</a>
</li>
</ul>
<div class="navigation-footer">
<a href="/docs/building">
Building Interfaces
</a>
<a href="/docs/ai">
AI Guide
</a>
<a href="/docs/integrations">
Integrations
</a>
</div>
</div>
</div>
</div>
</details>
</li>
<li class="navigation-item">
<a class="navigation-link" href="/">
Home
</a>
</li>
<li class="navigation-item">
<a class="navigation-link" href="/create">
Create
</a>
</li>
</ul>
</nav>Stacked
Use navigation-stacked in narrow sidebars; small screens stack the horizontal bar automatically.
View Code
<nav class="navigation navigation-stacked" data-navigation="" aria-label="Main">
<ul class="navigation-list">
<li class="navigation-item">
<a class="navigation-link" href="/" aria-current="page">
Home
</a>
</li>
<li class="navigation-item">
<details class="navigation-group">
<summary class="navigation-trigger">
Components
</summary>
<div class="navigation-panel">
<ul>
<li>
<a href="/components/button">
Button
</a>
</li>
<li>
<a href="/components/select">
Select
</a>
</li>
<li>
<a href="/components/dialog">
Dialog
</a>
</li>
<li>
<a href="/components/navigation">
Navigation
</a>
</li>
</ul>
</div>
</details>
</li>
<li class="navigation-item">
<details class="navigation-group">
<summary class="navigation-trigger">
Learn
</summary>
<div class="navigation-panel">
<ul>
<li>
<a href="/docs/install">
Install
</a>
</li>
<li>
<a href="/docs/themes">
Themes
</a>
</li>
<li>
<a href="/docs/ai">
AI Guide
</a>
</li>
</ul>
</div>
</details>
</li>
<li class="navigation-item">
<a class="navigation-link" href="/blocks">
Blocks
</a>
</li>
<li class="navigation-item">
<details class="navigation-group">
<summary class="navigation-trigger">
Resources
</summary>
<div class="navigation-panel">
<ul>
<li>
<a href="/icons">
Icons
</a>
</li>
<li>
<a href="/css">
CSS
</a>
</li>
<li>
<a href="/docs/themes">
Themes
</a>
</li>
</ul>
</div>
</details>
</li>
</ul>
</nav>Right-to-left
Panel alignment and horizontal arrow keys follow right-to-left reading. Chevrons still point down to open and up to close.
View Code
<nav class="navigation" data-navigation="" aria-label="ניווט ראשי" lang="he" dir="rtl">
<ul class="navigation-list">
<li class="navigation-item">
<a class="navigation-link" href="/" aria-current="page">
בית
</a>
</li>
<li class="navigation-item">
<details class="navigation-group">
<summary class="navigation-trigger">
מוצרים
</summary>
<div class="navigation-panel">
<ul>
<li>
<a href="/components/button">
כפתור
</a>
</li>
<li>
<a href="/components/select">
בחירה
</a>
</li>
<li>
<a href="/components/dialog">
חלון
</a>
</li>
<li>
<a href="/components/navigation">
תפריט ניווט
</a>
</li>
</ul>
</div>
</details>
</li>
<li class="navigation-item">
<details class="navigation-group">
<summary class="navigation-trigger">
ללמוד
</summary>
<div class="navigation-panel">
<ul>
<li>
<a href="/docs/install">
התקנה
</a>
</li>
<li>
<a href="/docs/themes">
ערכות נושא
</a>
</li>
<li>
<a href="/docs/ai">
מדריך AI
</a>
</li>
</ul>
</div>
</details>
</li>
<li class="navigation-item">
<a class="navigation-link" href="/blocks">
בלוקים
</a>
</li>
<li class="navigation-item">
<details class="navigation-group">
<summary class="navigation-trigger">
משאבים
</summary>
<div class="navigation-panel">
<ul>
<li>
<a href="/icons">
סמלים
</a>
</li>
<li>
<a href="/css">
CSS
</a>
</li>
<li>
<a href="/docs/themes">
ערכות נושא
</a>
</li>
</ul>
</div>
</details>
</li>
</ul>
</nav>