Navigation

Navbar

Sticky frosted-glass navigation bar with mobile hamburger menu.

Basic Usage

Top navigation bar with brand, items, and actions.

'use client'

import React from 'react'
import { Button, Text, Navbar } from 'biibaos'
import { Home } from 'lucide-react'

export default function App() {
  return (
    <div style={{ border: '1px solid var(--biiba-border)', borderRadius: 8, overflow: 'hidden' }}>
            <Navbar
              sticky={false}
              brand={<Text weight="bold">BiibaOS</Text>}
              items={[
                { label: 'Home', active: true },
                { label: 'Docs', href: '/docs' },
                { label: 'GitHub', href: 'https://github.com' }
              ]}
              actions={<Button size="sm">Login</Button>}
            />
          </div>
  )
}

Rich Nav Items

Add icons and badges to navigation links.

'use client'

import React from 'react'
import { Badge, Navbar, Icon } from 'biibaos'
import { Plus, Settings, Zap } from 'lucide-react'

export default function App() {
  return (
    <div style={{ border: '1px solid var(--biiba-border)', borderRadius: 8, overflow: 'hidden' }}>
            <Navbar
              sticky={false}
              brand={<Icon icon={Zap} size={24} style={{ color: 'var(--biiba-primary)' }} />}
              items={[
                { label: 'Inbox', icon: <Icon icon={Plus} size={16} />, badge: <Badge size="xs" variant="primary">5</Badge> },
                { label: 'Settings', icon: <Icon icon={Settings} size={16} /> }
              ]}
            />
          </div>
  )
}

Glass & Shadow

Customize the appearance with transparency and depth.

'use client'

import React from 'react'
import { Text, Navbar } from 'biibaos'
import { Home } from 'lucide-react'

export default function App() {
  return (
    <div style={{ border: '1px solid var(--biiba-border)', borderRadius: 8, overflow: 'hidden', padding: 20, background: 'var(--biiba-surface)' }}>
            <Navbar
              sticky={false}
              shadow
              bordered={false}
              brand={<Text weight="bold">Glass UI</Text>}
              items={[{ label: 'Home' }, { label: 'Explore' }]}
            />
          </div>
  )
}

Properties

Prop	Type	Default	Description
`brand`	`React.ReactNode`	—	Brand slot — logo, wordmark, or any node
`items`	`NavItem[]`	[]	Navigation links
`actions`	`React.ReactNode`	—	Right-side slot — actions, theme toggle, avatar, etc.
`mobileActions`	`React.ReactNode`	—	Extra actions shown ONLY in the mobile drawer
`transparent`	`boolean`	false	Transparent until scrolled
`sticky`	`boolean`	true	Stick to top
`bordered`	`boolean`	true	Border bottom
`centered`	`boolean`	false	Center-align nav items
`height`	`number`	—	Navbar height in px
`shadow`	`boolean`	false	Drop shadow

Alert

Sidebar