Navigation
Navbars, sidebar navigation, tabs, steps, breadcrumbs, command palettes, and pagination.
Navigation · 56 variants
How To Use This Page
Navigation sits inside the Application UI part of the catalog and collects reusable examples that solve the same job in different ways.
This page currently groups 24 examples so you can compare structure, emphasis, and density before choosing an implementation direction.
How The Content Is Grouped
- The examples are grouped as a single Application UI reference page so you can compare variations without leaving the route.
- Use the jump links to move straight to the most relevant example once you know which structure, layout, or emphasis pattern you need.
Navbars
Simple
Simple dark
With search
Dark with quick action
Tabs
Tabs with underline
Tabs with underline and badges
Tabs with underline and icons
Tabs in pills
Full width tabs with underline
Sidebar navigation
Simple with icons and badges
Brand with icons
With expandable sections
Steps
Circles
- Shipping
- 2Payment
- 3Confirmation
Progress bar
Step 1
Shipping
Step 2
Payment
Step 3
Confirmation
Step 2 of 3
Panels
Step 1
Shipping
Choose delivery speed and destination.
Step 2
Payment
Add card details and billing address.
Step 3
Confirmation
Review everything before placing the order.
Bullets
- Shipping
- Payment
- Confirmation
Breadcrumbs
Command palettes
Simple
With groups
Pagination
Centered page numbers
Vertical navigation
On gray