ComponentsNavigationNavbar

Navbar

16 variants · sidebar · two-row · command · glass · vercel · linear · stripe

SaaSCenteredPillStripeOutlinedVercelLinearCommandNotionTwo-rowGlassFrostedGradientSidebar

Overview

16 variants · sidebar · two-row · command · glass · vercel · linear · stripe

Application navbar

Live preview

Keep product identity, primary destinations, and account actions in a stable top-level region.

ApplicationNavbar.tsx
tsx
import { Navbar, Button, type NavItem } from 'omverse-ui'
 
const items: NavItem[] = [
{ id: 'dashboard', label: 'Dashboard', icon: 'info' },
{ id: 'projects', label: 'Projects', icon: 'info' },
{ id: 'team', label: 'Team', icon: 'info', badge: 3 },
{ id: 'analytics', label: 'Analytics', icon: 'info' },
{ id: 'settings', label: 'Settings', icon: 'settings' },
]
 
<Navbar
variant="saas"
items={items}
activeId={active}
onItemClick={item => setActive(item.id)}
brandName="DesignSystem"
actions={
<div style={{ display: 'flex', gap: 8 }}>
<Button size="sm" variant="outlined">Log in</Button>
<Button size="sm" variant="filled">Get started</Button>
</div>
}
/>

Use a navbar for a small set of persistent, high-level destinations. Put local page navigation closer to the content it controls.

Anatomy

  • Root container and spacing boundary.
  • Primary content and optional secondary metadata.
  • State indicators and utility affordances (icons, badges, controls).
  • Optional helper text, grouping, and behavioral wrappers.

When to use

  • Choose Navbar when a repeated, structured interaction is required.
  • Use it for clear, consistent operations across similar surfaces.
  • Use in forms, lists, and action workflows where clarity matters.

When not to use

  • Do not use only for decorative layout without interaction meaning.
  • Avoid duplicating the same behavior without distinct user context.
  • Prefer simpler HTML or textual content for static, non-interactive labels.

Variants

Component variants should be documented by API props and examples below.

States

Common states include idle, active, disabled, focused, and loading/pending states where applicable.

Behavior

Behavior should remain deterministic and keyboard-friendly, with clear visual feedback for every state transition.

Accessibility

  • Use semantic structure and visible labels whenever possible.
  • Preserve keyboard navigation and focus visibility.
  • Announce status and changes when context requires it.

Content guidelines

  • Prefer short, clear labels.
  • Keep content actions scannable and outcome-oriented.
  • Use consistent wording across similar components.

Examples

SaaS (default)

Live preview

Standard app navbar with brand, nav items and call-to-action buttons

App.tsx
tsx
import { Navbar, Button, type NavItem } from 'omverse-ui'
 
const items: NavItem[] = [
{ id: 'dashboard', label: 'Dashboard', icon: 'info' },
{ id: 'projects', label: 'Projects', icon: 'info' },
{ id: 'team', label: 'Team', icon: 'info', badge: 3 },
{ id: 'analytics', label: 'Analytics', icon: 'info' },
{ id: 'settings', label: 'Settings', icon: 'settings' },
]
 
<Navbar
variant="saas"
items={items}
activeId={active}
onItemClick={item => setActive(item.id)}
brandName="DesignSystem"
actions={
<div style={{ display: 'flex', gap: 8 }}>
<Button size="sm" variant="outlined">Log in</Button>
<Button size="sm" variant="filled">Get started</Button>
</div>
}
/>

Centered links

Live preview

Navigation items centered in the bar with logo and actions on the sides

App.tsx
tsx
<Navbar
variant="centered"
items={items}
activeId={active}
onItemClick={item => setActive(item.id)}
brandName="✦ Brand"
actions={
<div style={{ display: 'flex', gap: 8 }}>
<Button size="sm" variant="outlined">Log in</Button>
<Button size="sm" variant="filled">Get started</Button>
</div>
}
/>

Pill segmented

Live preview

Active item shown inside a pill-shaped segmented control

App.tsx
tsx
<Navbar
variant="pill"
items={items}
activeId={active}
onItemClick={item => setActive(item.id)}
brandName="⬡ App"
actions={userActions}
/>

Stripe-style

Live preview

Bottom border indicator — clean and minimal like Stripe's nav

App.tsx
tsx
<Navbar
variant="stripe"
items={items}
activeId={active}
onItemClick={item => setActive(item.id)}
brandName="◈ Platform"
actions={userActions}
/>

Outlined segmented

Live preview

Items grouped in a bordered segmented control — active item is filled

App.tsx
tsx
<Navbar
variant="outlined"
items={items.slice(0, 4)}
activeId={active}
onItemClick={item => setActive(item.id)}
brandName="◇ App"
actions={userActions}
/>

Vercel-style (dark)

Live preview

Dark navbar with light text — inspired by Vercel's design language

App.tsx
tsx
<Navbar
variant="vercel"
items={items}
activeId={active}
onItemClick={item => setActive(item.id)}
brandName="▲"
actions={
<div style={{ display: 'flex', gap: 8 }}>
<Button size="sm" variant="outlined">Feedback</Button>
<Button size="sm" variant="filled">Deploy</Button>
</div>
}
/>

Linear-style

Live preview

Workspace switcher on the left with icon nav items — inspired by Linear

App.tsx
tsx
<Navbar
variant="linear"
items={items}
activeId={active}
onItemClick={item => setActive(item.id)}
workspaceName="Design System"
workspaceIcon="DS"
user={{ name: 'John Doe', email: 'john@example.com' }}
/>

Command bar

Live preview

showSearch adds a ⌘K trigger — tap to open a command palette

App.tsx
tsx
<Navbar
variant="command"
items={items}
activeId={active}
onItemClick={item => setActive(item.id)}
brandName="◈"
showSearch
onSearchClick={() => alert('⌘K')}
actions={userActions}
/>

Notion-style (breadcrumb)

Live preview

items renders as a breadcrumb trail with chevron separators — ideal for wikis and docs

App.tsx
tsx
<Navbar
variant="notion"
items={[
{ id: 'workspace', label: 'Workspace', onClick: () => setActive('workspace') },
{ id: 'design', label: 'Design System', onClick: () => setActive('design') },
{ id: 'components', label: 'Components', onClick: () => setActive('components') },
]}
activeId="components"
brandName="N"
actions={
<div style={{ display: 'flex', gap: 8 }}>
<Button size="sm" variant="text">Share</Button>
<Button size="sm" variant="filled">Publish</Button>
</div>
}
/>

Two-row sticky

Live preview

Brand + title on top row, subItems as tab strip on the second row

App.tsx
tsx
<Navbar
variant="two-row"
title="Project settings"
subItems={subItems}
activeSubId={activeSub}
onItemClick={item => setActiveSub(item.id)}
brandName="◈"
/>

Glass (on colored bg)

Live preview

Frosted-glass effect — place over a gradient or image background

App.tsx
tsx
<div style={{ background: 'linear-gradient(to right, #6366f1, #8b5cf6)', borderRadius: 12, overflow: 'hidden' }}>
<Navbar
variant="glass"
items={items.slice(0, 4)}
activeId={active}
onItemClick={item => setActive(item.id)}
brandName="✦ Studio"
actions={<Button size="sm" style={{ background: '#fff', color: '#6366f1', border: 'none' }}>Contact</Button>}
/>
</div>

Frosted glass

Live preview

Subtle backdrop-blur surface — works well on tinted or image backgrounds

App.tsx
tsx
<div style={{ background: 'linear-gradient(to right, #e2e8f0, #f1f5f9)', borderRadius: 12, padding: 20, overflow: 'hidden' }}>
<Navbar
variant="frosted"
items={items.slice(0, 4)}
activeId={active}
onItemClick={item => setActive(item.id)}
brandName="✦ Studio"
actions={<Button size="sm" variant="filled">Get in touch</Button>}
/>
</div>

Gradient brand

Live preview

Gradient background navbar — high impact, ideal for landing pages

App.tsx
tsx
<Navbar
variant="gradient"
items={items}
activeId={active}
onItemClick={item => setActive(item.id)}
brandName="◈ Platform"
actions={
<div style={{ display: 'flex', gap: 8 }}>
<Button size="sm" variant="outlined" style={{ color: '#fff', borderColor: 'rgba(255,255,255,0.3)' }}>Docs</Button>
<Button size="sm" style={{ background: '#fff', color: '#6366f1', border: 'none' }}>Upgrade</Button>
</div>
}
/>

Sidebar

Live preview

Vertical sidebar with grouped sections — collapses to icon-only mode

Content area

App.tsx
tsx
import { Sidebar, type NavSection } from 'omverse-ui'
 
const sections: NavSection[] = [
{
label: 'Main',
items: [
{ id: 'dashboard', label: 'Dashboard', icon: 'info' },
{ id: 'projects', label: 'Projects', icon: 'info' },
{ id: 'team', label: 'Team', icon: 'info', badge: 3 },
],
},
{
label: 'Account',
items: [
{ id: 'settings', label: 'Settings', icon: 'settings' },
{ id: 'notifications', label: 'Notifications', icon: 'bell', badge: 12 },
],
},
]
 
<Sidebar
sections={sections}
activeId={active}
onItemClick={item => setActive(item.id)}
collapsed={collapsed}
brandName="DesignSys"
user={{ name: 'John Doe', email: 'john@example.com' }}
/>

Navbar props

Sidebar props

Props / API

Api Props

Props

PropTypeDefaultDescription
itemsNavItem[][]Main navigation items
activeIdstring—ID of the currently active item
onItemClick(item: NavItem) => void—Callback when an item is clicked
variant'saas' | 'centered' | 'pill' | 'stripe' | 'outlined' | 'vercel' | 'linear' | 'command' | 'notion' | 'two-row' | 'glass' | 'frosted' | 'gradient''saas'Navbar style preset
brandNamestring'Brand'Brand name text shown when no logo element is provided
logoReactNode—Logo element — overrides brandName when provided
actionsReactNode—Content rendered on the right side (buttons, avatar, search…)
titlestring—Page title shown next to the brand (two-row variant)
subItemsNavItem[][]Secondary nav items shown in the lower row (two-row variant)
activeSubIdstring—Active secondary item ID (two-row variant)
workspaceNamestring'Workspace'Workspace name (linear variant)
workspaceIconstring'WS'Workspace initials or emoji (linear variant)
user{ name: string; email?: string; avatarSrc?: string }—User info shown in the profile area (linear variant)
showSearchbooleanfalseShows a ⌘K search trigger (command variant)
onSearchClick() => void—Callback when the search trigger is clicked
sectionsNavSection[][]Grouped navigation sections
activeIdstring—ID of the currently active item
onItemClick(item: NavItem) => void—Callback when an item is clicked
collapsedbooleanfalseCollapses to icon-only mode
brandNamestring'Brand'Brand name shown in the header
logoReactNode—Logo element — overrides brandName when provided
user{ name: string; email?: string; avatarSrc?: string }—User info shown in the footer area