Overlays

Dropdown

Floating selection menus that adapt to bottom sheets on mobile.

Dropdown

Floating menus that adapt to bottom sheets on mobile.

'use client'

import React from 'react'
import { Dropdown, Button, Icon } from 'biibaos'
import { User, Settings, LogOut } from 'lucide-react'

export default function App() {
  const items = [
    { label: 'Profile', icon: <Icon icon={User} size={16} /> },
    { label: 'Settings', icon: <Icon icon={Settings} size={16} /> },
    { type: 'divider' },
    { label: 'Logout', icon: <Icon icon={LogOut} size={16} />, variant: 'danger' },
  ]

  return (
    <Dropdown 
      trigger={<Button variant="secondary">My Account</Button>}
      items={items}
    />
  )
}

Groups & Headers

Organize related actions with headers and dividers.

'use client'

import React from 'react'
import { Dropdown, Button, Icon } from 'biibaos'
import { MoreHorizontal } from 'lucide-react'

export default function App() {
  return (
    <Dropdown
      trigger={<Button variant="ghost" iconOnly leftIcon={<Icon icon={MoreHorizontal} />} />}
      width={220}
      items={[
        { type: 'header', label: 'Organization' },
        { label: 'Team settings', onClick: () => { } },
        { label: 'Billing', onClick: () => { } },
        { type: 'divider' },
        { type: 'header', label: 'Account' },
        { label: 'Profile', onClick: () => { } },
        { label: 'Log out', variant: 'danger' },
      ]}
    />
  )
}

Properties

Prop	Type	Default	Description
`trigger`	`React.ReactNode`	—	Visual trigger element that spawns the menu list
`items`	`DropdownItemProps[]`	—	Array of item configurations with label, icon, actions, and active states
`isOpen`	`boolean`	—	Controlled state of overlay visibility
`onOpenChange`	`(open: boolean) => void`	—	Configures the onOpenChange option
`width`	`number \| string`	200	Horizontal width in pixels or CSS units
`label`	`React.ReactNode`	—	Primary text label description
`icon`	`React.ReactNode`	—	Custom icon prefix element
`shortcut`	`string`	—	Configures the shortcut option
`onClick`	`() => void`	—	Click event callback handler
`disabled`	`boolean`	—	If true, disables all user interaction and applies faded opacity
`variant`	`'default' \| 'danger'`	—	Semantic design theme variant
`type`	`'item' \| 'divider' \| 'header'`	—	Semantic HTML input type classification (text, password, email, etc.)

Breadcrumb

Tabs