Styled UI Library

Components

Drop Down

A dropdown menu presents a list of actions that a user can take.

Examples

link

Default

A dropdown menu renders the unordered menu list <ul> with role='menu'. The only mandatory prop is a trigger prop which expects a function that returns a JSX element. The function is provided with a toggleDropDown callback to control the opening and closing of the dropdown. Any element can serve as a dropdown trigger. In this case, it's a Button component, but it can also be just a string, a span element or a div element or any other.

import { DropDown, DropDownItem } from '@millanbrankovic/styled-ui-library';

function DefaultDropDownExample() {
  return (
    <DropDown trigger={(toggleDropDown) => 
      <Button title="Dropdown button" onClick={toggleDropDown} />}>

      <DropDownItem>
        <Link href="#">Action</Link>
      </DropDownItem>
      <DropDownItem>
        <Link href="#">Another action</Link>
      </DropDownItem>
      <DropDownItem>
        <Link href="#">Something else here</Link>
      </DropDownItem>
    </DropDown>
  );
};

export default DefaultDropDownExample;
link

Appearance

Rounded Corners

hasRadius provides the rounded corners on the dropdown menu.

import { DropDown, DropDownItem } from '@millanbrankovic/styled-ui-library';

function RoundedCornersDropDownExample() {
  return (
    <DropDown hasRadius trigger={(toggleDropDown) => 
      <Button title="Dropdown button" onClick={toggleDropDown} />}>

      <DropDownItem>
        <Link href="#">Action</Link>
      </DropDownItem>
      <DropDownItem>
        <Link href="#">Another action</Link>
      </DropDownItem>
      <DropDownItem>
        <Link href="#">Something else here</Link>
      </DropDownItem>
    </DropDown>
  );
};

export default RoundedCornersDropDownExample;
link

Align

It is also possible to align a menu to the left or to the right depending on the need.

import { DropDown, DropDownItem } from '@millanbrankovic/styled-ui-library';

function AlignDropDownExample() {
  return (
    <DropDown align='right' trigger={(toggleDropDown) => 
      <Button title="Dropdown button" onClick={toggleDropDown} />}>

      <DropDownItem>
        <Link href="#">Action</Link>
      </DropDownItem>
      <DropDownItem>
        <Link href="#">Another action</Link>
      </DropDownItem>
      <DropDownItem>
        <Link href="#">Something else here</Link>
      </DropDownItem>
    </DropDown>
  );
};

export default AlignDropDownExample;
link

Size

Narrow & Wide

Two options are available under the size prop, narrow and wide. If no size prop is passed, a default width is applied.

import { DropDown, DropDownItem } from '@millanbrankovic/styled-ui-library';

function SizeDropDownExample() {
  return (
    <DropDown trigger={(toggleDropDown) => 
      <Button title="Dropdown button" onClick={toggleDropDown} />}>

      <DropDownItem>
        <Link href="#">Action</Link>
      </DropDownItem>

      ...
    </DropDown>

    <DropDown size='narrow' trigger={(toggleDropDown) => 
      <Button title="Dropdown button" onClick={toggleDropDown} />}>

      <DropDownItem>
        <Link href="#">Action</Link>
      </DropDownItem>

      ...
    </DropDown>

    <DropDown size='wide' trigger={(toggleDropDown) => 
      <Button title="Dropdown button" onClick={toggleDropDown} />}>

      <DropDownItem>
        <Link href="#">Action</Link>
      </DropDownItem>

      ...
    </DropDown>
  );
};

export default SizeDropDownExample;