• Get Started
    • Introduction
    • Installation
    • Theming
  • Layout
    • Drawer
    • Footer
    • Hero
    • Indicator
    • Join
    • Stack
    • Divider
  • Navigation
    • Breadcrumbs
    • Dock
    • Menu
    • Link
    • Navbar
    • Pagination
    • Steps
    • Tabs
  • Data Display
    • Accordion
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Chat
    • Collapse
    • Countdown
    • Diff
    • Kbd
    • List
    • Mask
    • Mockup
    • Stat
    • Table
    • Timeline
  • Feedback
    • Alert
    • Loading
    • Modal
    • Progress
    • Skeleton
    • Status
    • Toast
    • Tooltip
  • Forms
    • Button
    • Checkbox
    • Dropdown
    • File Input
    • Fieldset
    • Filter
    • Input
    • Label
    • Radio
    • Range
    • Rating
    • Select
    • Toggle
    • Textarea
  • Effects
    • Hover 3D Card
    • Hover Gallery
    • Speed Dial
    • Swap
    • Text Rotate
    • Theme Controller
jsx daisyUI

    No recently viewed docs

  • Get Started
    • Introduction
    • Installation
    • Theming
  • Layout
    • Drawer
    • Footer
    • Hero
    • Indicator
    • Join
    • Stack
    • Divider
  • Navigation
    • Breadcrumbs
    • Dock
    • Menu
    • Link
    • Navbar
    • Pagination
    • Steps
    • Tabs
  • Data Display
    • Accordion
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Chat
    • Collapse
    • Countdown
    • Diff
    • Kbd
    • List
    • Mask
    • Mockup
    • Stat
    • Table
    • Timeline
  • Feedback
    • Alert
    • Loading
    • Modal
    • Progress
    • Skeleton
    • Status
    • Toast
    • Tooltip
  • Forms
    • Button
    • Checkbox
    • Dropdown
    • File Input
    • Fieldset
    • Filter
    • Input
    • Label
    • Radio
    • Range
    • Rating
    • Select
    • Toggle
    • Textarea
  • Effects
    • Hover 3D Card
    • Hover Gallery
    • Speed Dial
    • Swap
    • Text Rotate
    • Theme Controller

© 2026 jsx-daisyui. All rights reserved. | Built with DaisyUI and React.

Menu

Menu is used to display a list of links vertically or horizontally.

Installation
npx jsx-daisyui add menu

Default

menu-default
  • Home
  • Profile
  • Settings

Horizontal

menu-horizontal
  • Home
  • About
  • Contact

Sizes

menu-sizes
  • Xsmall 1
  • Xsmall 2
  • Small 1
  • Small 2
  • Medium 1
  • Medium 2
  • Large 1
  • Large 2
  • Xlarge 1
  • Xlarge 2

With Title

menu-with-title
  • Main
  • Dashboard
  • Analytics
  • Settings
  • Account
  • Privacy
  • Billing

With Submenu

menu-with-submenu
  • Home
  • Products
    • All Products
    • Categories
    • Brands
  • Contact

Active Item

menu-active
  • Home
  • Profile
  • Settings

Controlled

menu-controlled

Active: home

  • Home
  • Profile
  • Settings
  • Billing

Disabled

menu-disabled
  • Enabled item
  • Disabled item
  • Disabled item

Links

menu-links
  • Home
  • About
  • Contact

Props

Menu

PropTypeDefaultDescription
activestring-Value of the currently active item. Matched against Menu.Item value prop to apply menu-active to the child element.
size'xs' | 'sm' | 'md' | 'lg' | 'xl''md'Size of the menu.
direction'vertical' | 'horizontal''vertical'Direction of the menu.

Menu.Item

PropTypeDefaultDescription
valuestring-Value matched against Menu active prop to mark this item as active. Adds menu-active to the child element.
disabledboolean-Adds menu-disabled to the <li>.