ComponentsNavigationNavbar

Navbar

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

SaaSCenteredPillStripeOutlinedVercelLinearCommandNotionTwo-rowGlassFrostedGradientSidebar

SaaS (default)

Live preview

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

App.tsx

tsx

1import { Navbar, Button, type NavItem } from 'omverse-ui'
2 
3const items: NavItem[] = [
4  { id: 'dashboard', label: 'Dashboard', icon: 'info' },
5  { id: 'projects',  label: 'Projects',  icon: 'info' },
6  { id: 'team',      label: 'Team',      icon: 'info', badge: 3 },
7  { id: 'analytics', label: 'Analytics', icon: 'info' },
8  { id: 'settings',  label: 'Settings',  icon: 'settings' },
9]
10 
11<Navbar
12  variant="saas"
13  items={items}
14  activeId={active}
15  onItemClick={item => setActive(item.id)}
16  brandName="DesignSystem"
17  actions={
18    <div style={{ display: 'flex', gap: 8 }}>
19      <Button size="sm" variant="outlined">Log in</Button>
20      <Button size="sm" variant="filled">Get started</Button>
21    </div>
22  }
23/>

Centered links

Live preview

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

App.tsx

tsx

1<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>
}
13/>

Pill segmented

Live preview

Active item shown inside a pill-shaped segmented control

App.tsx

tsx

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

Stripe-style

Live preview

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

App.tsx

tsx

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

Outlined segmented

Live preview

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

App.tsx

tsx

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

Vercel-style (dark)

Live preview

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

App.tsx

tsx

1<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>
}
13/>

Linear-style

Live preview

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

App.tsx

tsx

1<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' }}
9/>

Command bar

Live preview

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

App.tsx

tsx

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

Notion-style (breadcrumb)

Live preview

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

App.tsx

tsx

1<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>
}
16/>

Two-row sticky

Live preview

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

App.tsx

tsx

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

Glass (on colored bg)

Live preview

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

App.tsx

tsx

1<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>}
/>
10</div>

Frosted glass

Live preview

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

App.tsx

tsx

1<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>}
/>
10</div>

Gradient brand

Live preview

Gradient background navbar — high impact, ideal for landing pages

App.tsx

tsx

1<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>
}
13/>

Sidebar

Live preview

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

App.tsx

tsx

1import { Sidebar, type NavSection } from 'omverse-ui'
2 
3const 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 },
  ],
},
19]
20 
21<Sidebar
sections={sections}
activeId={active}
onItemClick={item => setActive(item.id)}
collapsed={collapsed}
brandName="DesignSys"
user={{ name: 'John Doe', email: 'john@example.com' }}
28/>

Navbar props

Props

PropTypeDefaultDescription

itemsNavItem[][]Main navigation items

activeIdstring—ID of the currently active item

onItemClick(item: NavItem) => void—Callback when an item is clicked

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

Sidebar props

Props

PropTypeDefaultDescription

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