Skip to main content

Dropdown

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

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.

Variations of the button

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

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

Icons

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

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.

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.

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.