Skip to main content

Dropdown

The dropdown component enables you to show accessible dropdown menus. This component is based on the Radix-Ui Dropdown Primitive. All of the exposed APIs and components are exposed here, just some are styled to fit the StreamElements design system.

Basic example​

Use the exposed Dropdown object from the library to access all the components.

import { Dropdown } from '@streamelements/frontend-ui';

export function MyComponent() {
  return <Dropdown.Root>
    <Dropdown.Trigger>Open menu</Dropdown.Trigger>
    <Dropdown.Content>    
      <Dropdown.Item>Kappa</Dropdown.Item>
      <Dropdown.Item>PogChamp</Dropdown.Item>
      <Dropdown.Item>FrankerZ</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown.Root>
}

Exposed components​

  • Root
  • Trigger
  • Arrow
  • Group
  • Label
  • CheckboxItem
  • RadioGroup
  • RadioItem
  • ItemIndicator
  • Separator
  • Content
  • Item

Api reference​

Check out the Radix-UI Dropdown Docs Page for API docs.

Trigger​

The Dropdown.Trigger component should be styled on a per-need basis. This is because anything can trigger a dropdown menu to open and therefor no assumptions should be made for the styling of the element. This can be a subject of change of course, but in such case, a separate component under a different name will be exposed to account for backwards compatibility. If you have a component that you want to be the Trigger without a wrapping Radix button element (rendered from the Dropdown.Trigger component), pass asChild prop to Dropdown.Trigger and pass the desired component/element as child.

Custom trigger example​

import { Dropdown, styled } from '@streamelements/frontend-ui';

const DropdownTrigger = styled(Dropdown.Trigger, {
  bgc: '$uiPrimaryMain',
  border: 'none',
  color: '$textPrimaryMainInverted',
  py: '4px',
  px: '16px',
  br: '$base',
});

export function MyComponent() {
  return <Dropdown.Root>
    <DropdownTrigger>Open menu</DropdownTrigger>
    <Dropdown.Content>    
      <Dropdown.Item>Kappa</Dropdown.Item>
      <Dropdown.Item>PogChamp</Dropdown.Item>
      <Dropdown.Item>FrankerZ</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown.Root>
}

Content​

The content component is a styled component. This means you should never plug it in a styled(component, styles) call because it'll override the underlying radix functionality! This is a missing feature in Stitches. What you should do, instead, is to use the css function to generate a class name if you need to manipulate the style of it, although you should almost never have to do that.

For the Dropdown.Content you can't use asChild={true} right now.

VariantvaluesDefaultDescription
bg'secondary' | 'tertiary' | 'quaternary''secondary'Sets preferred background from the $ui prefix.
density'default' | 'compact''default'If "compact", a reduced all-around padding is set.

Item​

It is recommended you just use Dropdown.Item as a wrapper with asChild={true} prop. This way all the Radix props for Dropdown.Item will be passed on to the child of that item, resulting in a more semantic HTML as well as reducing the overall dom nodes that are outputted.

Here's an example of a List item being used as a dropdown item. You can also use the content styling method and provide a className to the DropDown.Item component to alter it's styles.

import { Dropdown, ListItem } from '@streamelements/frontend-ui';

...

const items = useItems();

return <>
  {items.map(item => {
    return <Dropdown.Item key={item.id} asChild>
      <ListItem as="span">{item.name}</ListItem>
    </Dropdown.Item>
  })}
</>