Skip to documentation

Burger

Mobile navigation toggle that opens a drawer of List items under the header, or fullscreen with large type.

import { Burger } from '@lobehub/ui/base-ui';
NPMSourceEdit
Navigation

Basic

Loading preview

APIs

Burger properties
activeKey
null | string | number | bigint
className
string
footer
null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
fullscreen
boolean

Defaults to false.

headerHeight
number

Defaults to 64.

itemsRequired
ListItem[]
onOpenChangeRequired
(opened: boolean) => void
onSelect
(key: Key) => void
openedRequired
boolean
size
number | 'small' | 'large' | 'middle' | ActionIconSizeConfig
style
CSSProperties
variant
'filled' | 'outlined' | 'borderless'

items use the base-ui List item shape, so the same builders serve desktop lists and the mobile menu. Selecting an item calls onSelect and closes the drawer. fullscreen covers the header, renders labels in large type without icons and pins footer to the bottom.

Migrating from the root Burger

  • setOpened → onOpenChange; selectedKeys → activeKey; onClick → onSelect(key).
  • antd Menu items → base-ui List items; nested submenus are not supported.
  • drawerProps, openKeys, rootClassName and iconProps are gone.