Dropdown

EXPERIMENTAL

A dropdown offers a user a list of options or actions. Dropdowns are often used as part of forms and filters.

Open this example in a new tab

When to use this component

Use the dropdown component to provide more options to users in cases where there is not enough space such as tables, navbars, etc.

When not to use this component

Do not use the dropdown component to hide information that the majority of your users will need. Also, do not use the dropdown component if you have enought space to show the content.

How it works

The dropdown component is a short link that shows more content when a user clicks on it.

You can use the above HTML.

Open this example in a new tab

Variations of the button

The govgr-dropdown__button can be a primary, secondary, or warning button, by adding the appropriate class.

Open this example in a new tab

Open this example in a new tab

Also, the govgr-dropdown__button can be a govgr-link, too.

Open this example in a new tab

Icons

The button of the dropdown component can take as props text, icons, or a combination of both. Below, you can find some examples:

Open this example in a new tab

Also, if you want to use the default gov.gr rotating arrow, you can add the govgr-dropdown__button--arrow class next to govgr-dropdown__button.

Open this example in a new tab

Disable dropdown button

Disabled dropdown button have poor contrast and can confuse some users, so avoid them if possible.

Only use disabled dropdown buttons if research shows it makes the user interface easier to understand.

Open this example in a new tab

Content position

The default position of the dropdown content is bottom-right.

You can change the position by adding the classes govgr-dropdown--up and/or govgr-dropdown--left to fix position.

Open this example in a new tab