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 { Button, Icon, Dropdown } from 'biibaos'
import { Play, Settings, User } from 'lucide-react'

export default function App() {
  return (
    <Dropdown
          trigger={<Button variant="secondary">Actions</Button>}
          items={[
            { label: 'Profile', icon: <Icon icon={User} size={16} />, onClick: () => alert('Profile') },
            { label: 'Settings', icon: <Icon icon={Settings} size={16} />, onClick: () => alert('Settings') },
            { label: 'Sign out', icon: <Icon icon={Play} size={16} />, variant: 'danger', onClick: () => alert('Out') },
          ]}
        />
  )
}

Groups & Headers

Organize related actions with headers and dividers.

'use client'

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

export default function App() {
  return (
    <Dropdown
          trigger={<Button variant="ghost" iconOnly leftIcon={<Icon icon={MoreHorizontal} size={20} />} />}
          width={220}
          items={[
            { type: 'header', label: 'Organization' },
            { label: 'Team settings', onClick: () => { } },
            { label: 'Billing', onClick: () => { } },
            { type: 'divider', label: '' },
            { 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