Dropdown

The Dropdown component displays a menu to the user, such as a set of actions or functions, triggered by a button.

Preview

Usage

import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from 'components/lib';

function MyComponent({ ...props }){
  return (
    <DropdownMenu>
      <DropdownMenuTrigger >Open Menu</DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem>Item 1</DropdownMenuItem>
        <DropdownMenuItem>Item 2</DropdownMenuItem>
        <DropdownMenuItem>Item 3</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Props

Prop	Description	Required	Value
children	children to render	required	component(s)
className	custom class	optional	SCSS or Tailwind
inset	toggle triggle style	optional	boolean

Example

import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from 'components/lib';

export function User(){

  return (
    <div>
      <DropdownMenu>

        <DropdownMenuTrigger asChild>
          Trigger
        </DropdownMenuTrigger>

        <DropdownMenuContent align='end'>
        
          <DropdownMenuItem>
            <Button 
              variant='naked' 
              icon='user' 
              text='Edit Account' 
              url='/account/profile'
            />
          </DropdownMenuItem>

          <DropdownMenuItem>
            <Button 
              variant='naked' 
              icon='help-circle' 
              text='Help' 
              url='/help'
            />
          </DropdownMenuItem>

        </DropdownMenuContent>
      </DropdownMenu> 
    </div>
  )
}

Notes

• The Dropdown component uses DropdownMenuPrimitive components from @radix-ui/react-dropdown-menu.

• The children prop is required and should include the elements to be displayed in the dropdown.

• The className prop allows for custom styling.

• The inset prop toggles the trigger style.

• For more details, refer to the Shadcn Dropdown Menu documentation.