Drop Down
A dropdown menu presents a list of actions that a user can take.
Examples
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;
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;
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;
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;