Dropdown

A dropdown list

Import: import { Dropdown } from '@kubed/components;'

Source: View source code

Docs: Edit this page

npm: @kubed/components

Documentation

Component Props

Usage

When there are more than a few options to choose from, you can wrap them in a Dropdown. By hovering or clicking on the trigger, a dropdown menu will appear, which allows you to choose an option and execute the relevant action.

Basic Usage

Set content and trigger method of dropdown, the default trigger method is click.

() => {
const { Add, Stop, Pen, Trash, More } = KubeIcon;
const MenuComponent = (
  <Menu>
    <MenuLabel>menu label</MenuLabel>
    <MenuItem icon={<Add />}>Add</MenuItem>
    <MenuItem icon={<Stop />}>Stop</MenuItem>
    <MenuItem icon={<Pen />}>Edit</MenuItem>
    <MenuItem icon={<Trash />}>Delete</MenuItem>
  </Menu>
);
return (
  <div style={{ height: '100px', width: '100%', backgroundColor: '#f9fbfd' }}>
    <Dropdown content={MenuComponent}>
      <Button variant="text" radius="lg">
        <More size={16} />
      </Button>
    </Dropdown>
  </div>
)
}

1
() => {
2
const { Add, Stop, Pen, Trash, More } = KubeIcon;
3
const MenuComponent = (
4
  <Menu>
5
    <MenuLabel>menu label</MenuLabel>
6
    <MenuItem icon={<Add />}>Add</MenuItem>
7
    <MenuItem icon={<Stop />}>Stop</MenuItem>
8
    <MenuItem icon={<Pen />}>Edit</MenuItem>
9
    <MenuItem icon={<Trash />}>Delete</MenuItem>
10
  </Menu>
11
);
12
return (
13
  <div style={{ height: '100px', width: '100%', backgroundColor: '#f9fbfd' }}>
14
    <Dropdown content={MenuComponent}>
15
      <Button variant="text" radius="lg">
16
        <More size={16} />
17
      </Button>
18
    </Dropdown>
19
  </div>
20
)
21
}
22