dropdown-item

Props

Prop name	Type	Default	Description
`divider`	`boolean \| undefined`	`false`	Shows a divider between the items.
`extraClasses`	`string \| undefined`		Injection in class name.
`children`	`ReactNode`		The rendered text.
`active`	`boolean \| undefined`	`false`	Makes the item active since v. 2.2.0
`InlineIcon`	`InlineIconProp \| undefined`		Icon to display next to the item text. ``` InlineIcon \| { regular: InlineIcon, active: InlineIcon } ``` since v. 2.5.0
`Elem`	`"button" \| "a" \| "div" \| "span" \| undefined`		Override the default element to render the content.
`href`	`string \| undefined`		The url to link to.
`RouterLink`	`HCRouterLink \| undefined`		custom link RouterLink, e.g. if you use ReactRouter or similar library
`shouldCloseDialog`	`boolean \| undefined`		Use this prop if you want this link to close the open sub menu and panels when clicked. E.g.: single page applications. since v. 16.2.0

This is a specialized component to be used in the Dropdown.

Check the Dropdown component for more examples.

Here is an example of many DropdownItem variations you can achieve:

import { Dropdown, DropdownItem, Button } from '@flixbus/honeycomb-react';
import { Icon, IconBeer, IconBeerSolid } from '@flixbus/honeycomb-icons-react';
import { BrowserRouter, NavLink } from 'react-router-dom';

const linkArray = [
  <DropdownItem key="1" href="/active-link" InlineIcon={{ regular: IconBeer, active: IconBeerSolid }} active>Active link</DropdownItem>,
  <DropdownItem key="2" href="/link" InlineIcon={{ regular: IconBeer, active: IconBeerSolid }}>Link</DropdownItem>,
  <DropdownItem key="3" Elem="button" onClick={() => console.log('click!')}>Button</DropdownItem>,
  <DropdownItem key="4" divider />,
  <DropdownItem key="5">Text</DropdownItem>,
  <DropdownItem key="6" RouterLink={NavLink} to="/route" InlineIcon={IconBeer}>Router link</DropdownItem>,
];

<div style={{ textAlign: 'center' }}>
  <BrowserRouter>
    <Dropdown active links={linkArray}>
      <Button appearance="primary">Dropdown Item Options</Button>
    </Dropdown>
  </BrowserRouter>
</div>
import { Dropdown, DropdownItem, Button } from '@flixbus/honeycomb-react';
import { Icon, IconBeer, IconBeerSolid } from '@flixbus/honeycomb-icons-react';
import { BrowserRouter, NavLink } from 'react-router-dom';

const linkArray = [
  <DropdownItem key="1" href="/active-link" InlineIcon={{ regular: IconBeer, active: IconBeerSolid }} active>Active link</DropdownItem>,
  <DropdownItem key="2" href="/link" InlineIcon={{ regular: IconBeer, active: IconBeerSolid }}>Link</DropdownItem>,
  <DropdownItem key="3" Elem="button" onClick={() => console.log('click!')}>Button</DropdownItem>,
  <DropdownItem key="4" divider />,
  <DropdownItem key="5">Text</DropdownItem>,
  <DropdownItem key="6" RouterLink={NavLink} to="/route" InlineIcon={IconBeer}>Router link</DropdownItem>,
];

<div style={{ textAlign: 'center' }}>
  <BrowserRouter>
    <Dropdown active links={linkArray}>
      <Button appearance="primary">Dropdown Item Options</Button>
    </Dropdown>
  </BrowserRouter>
</div>