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 { Navbar, Text, Button } from 'biibaos'

export default function App() {
  return (
    <Navbar 
      brand={<Text weight="bold">Brand</Text>}
      items={[
        { label: 'Home', active: true },
        { label: 'Docs', href: '/docs' },
        { label: 'GitHub', href: 'https://github.com' }
      ]}
      actions={<Button size="sm">Login</Button>}
    />
  )
}

Rich Nav Items

Add icons and badges to navigation links.

'use client'

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

export default function App() {
  return (
    <Navbar 
      brand={<Icon icon={Zap} />}
      items={[
        { 
          label: 'Inbox', 
          icon: <Icon icon={Plus} />, 
          badge: <Badge size="xs" variant="primary">5</Badge> 
        },
        { 
          label: 'Settings', 
          icon: <Icon icon={Settings} /> 
        }
      ]}
    />
  )
}

Glass & Shadow

Customize the appearance with transparency and depth.

'use client'

import React from 'react'
import { Navbar, Text } from 'biibaos'

export default function App() {
  return (
    <Navbar 
      shadow 
      bordered={false} 
      brand={<Text weight="bold">Logo</Text>} 
    />
  )
}

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