Get Started

Components

accordion alert avatar breadcrumb button checkbox dropdown input label modal pagination radio select sheet skeleton switch table textarea toast

Dropdown

Displays a menu to the user — such as a set of actions or functions — triggered by a button.

code

Expend code


    <DropdownMenu>
      <DropdownMenuTrigger toggleStatusBar={toggleStatusBar1} buttonRef={buttonRef1}>
        <Button
          variant="outlined"
        >
          Open
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent
        showStatusBar={showDefault}
        toggleStatusBar={toggleStatusBar1}
        menuRef={menuRef1}
        buttonRef={buttonRef1}
      >
        <DropdownMenuItem href="/docs">Documentation</DropdownMenuItem>
        <DropdownMenuItem href="/docs/components/dropdown">Dropdown</DropdownMenuItem>
        <DropdownMenuItem href="/examples">Examples</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>


    <DropdownMenu>
      <DropdownMenuTrigger toggleStatusBar={toggleStatusBar1} buttonRef={buttonRef1}>
        <Button
          variant="outlined"
        >
          Open
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent
        showStatusBar={showDefault}
        toggleStatusBar={toggleStatusBar1}
        menuRef={menuRef1}
        buttonRef={buttonRef1}
      >
        <DropdownMenuItem href="/docs">Documentation</DropdownMenuItem>
        <DropdownMenuItem href="/docs/components/dropdown">Dropdown</DropdownMenuItem>
        <DropdownMenuItem href="/examples">Examples</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>

#Radio Group

code

Expend code


    <DropdownMenu>
      <DropdownMenuTrigger toggleStatusBar={toggleStatusBar2} buttonRef={buttonRef2}>
        <Button variant="outlined">
          Open
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent
        showStatusBar={showRadio}
        toggleStatusBar={toggleStatusBar2}
        menuRef={menuRef2}
        buttonRef={buttonRef2}
      >
        <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
          <form className="w-full px-4 bg-white rounded-lg shadow">
            <div className="flex flex-col">
              <DropdownMenuItem>
                <Radio label="Top" name="options" value="Top" className="flex text-gray-600" />
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Radio label="Bottom" name="options" value="Bottom" className="flex text-gray-600" />
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Radio label="Left" name="options" value="Left" className="flex text-gray-600" />
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Radio label="Right" name="options" value="Right" className="flex text-gray-600" />
              </DropdownMenuItem>
            </div>
          </form>
      </DropdownMenuContent>
    </DropdownMenu>


    <DropdownMenu>
      <DropdownMenuTrigger toggleStatusBar={toggleStatusBar2} buttonRef={buttonRef2}>
        <Button variant="outlined">
          Open
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent
        showStatusBar={showRadio}
        toggleStatusBar={toggleStatusBar2}
        menuRef={menuRef2}
        buttonRef={buttonRef2}
      >
        <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
          <form className="w-full px-4 bg-white rounded-lg shadow">
            <div className="flex flex-col">
              <DropdownMenuItem>
                <Radio label="Top" name="options" value="Top" className="flex text-gray-600" />
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Radio label="Bottom" name="options" value="Bottom" className="flex text-gray-600" />
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Radio label="Left" name="options" value="Left" className="flex text-gray-600" />
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Radio label="Right" name="options" value="Right" className="flex text-gray-600" />
              </DropdownMenuItem>
            </div>
          </form>
      </DropdownMenuContent>
    </DropdownMenu>

DropdownMenu

A container component for a dropdown menu.

Prop	Type	Default	Description
children	React.ReactNode	-	Includes components inside the dropdown menu.

DropdownMenuTrigger

A trigger component that opens the dropdown menu.

Prop	Type	Default	Description
children	React.ReactNode	-	Includes the button or other trigger elements to open the dropdown menu.
toggleStatusBar	(event: React.MouseEvent) => void	-	Includes the button or other trigger elements to open the dropdown menu.
buttonRef	React.RefObject<HTMLButtonElement>	-	Provides a reference to the trigger button.

DropdownMenuContent

A component that displays the content of the dropdown menu.

Prop	Type	Default	Description
showStatusBar	boolean	false	Controls whether the dropdown menu is open.
toggleStatusBar	(event: React.MouseEvent) => void	-	A function that toggles the open/close state of the dropdown menu.
menuRef	React.RefObject<HTMLDivElement>	-	Used to pass a reference to the menu content.
buttonRef	React.RefObject<HTMLButtonElement>	-	Used to pass a reference to the trigger button.
children	React.ReactNode	-	Includes the content to be displayed inside the dropdown menu.

DropdownMenuLabel

A component that displays the label for dropdown menu items.

Prop	Type	Default	Description
children	React.ReactNode	-	Includes the label text or content.

DropdownMenuItem

A component that represents each item in the dropdown menu.

Prop	Type	Default	Description
children	React.ReactNode	-	Includes the content to be displayed in the dropdown menu item.
href	string	-	The URL used when the item behaves like a link. If not specified, it will be displayed as plain text.