CSS ComponentThe latest version of this package is: 17.0.30-alpha.8, Opens in new window
A Dropdown Menu offers a list of actions, links or functions that a user can access.
This component provides .css
, .styl
, .less
and .scss
-files.
To be able to install this component, please refer to the Project Setup documentation.
$ npm i @ids-core/dropdown-menu@17.0.30-alpha.8
Table of Contents
Edit this section, Opens in new windowUsage
Required markup
<nav class="if dropdown-menu [is-open] [pinned [top|bottom|right|left]] [left|right|center]">
<ul class="if">
<li class="if [is-parent] [[left|right|center]]">
<a tabindex="-1" role="menuitem" class="if" href="asdasd" disabled>Adjust dates</a>
</li>
<li class="if separator"></li>
<li class="if is-parent right">
<a tabindex="-1" role="menuitem" class="if" href="/">Theme</a>
<div class="if dropdown-menu [left|right|center]">
<ul class="if">
<li class="if">
<button
tabindex="-1"
role="menuitem"
type="button"
data-theme="light"
class="if js-toggle-theme is-active"
>
Light
</button>
</li>
โฆ
</ul>
</div>
</li>
โฆ
</ul>
</nav>
Menu item
A menu item is the option provided to the user. It can either be a link or a button.
<li class="if">
<a tabindex="-1" role="menuitem" href="<link>" class="if">Send to debt collection</a>
</li>
Or
<li class='if'>
<button
tabindex='-1'
role='menuitem'
type='button'
onClick=''
class='if'
>Send to debt collection</a>
</li>
Parent actions
<li class="if is-parent [if [left|right|center]]">
<button tabindex="-1" role="menuitem" type="button" class="if is-active">Inverse</button>
</li>
Active actions
<li class="if">
<button tabindex="-1" role="menuitem" type="button" class="if is-active">Inverse</button>
</li>
Disabled actions
<li class="if">
<button tabindex="-1" role="menuitem" type="button" disabled class="if">Reimburse</button>
</li>
<li class="if">
<a tabindex="-1" role="menuitem" href disabled class="if">Reimburse</a>
</li>
Separators
<li class="if separator"></li>
Keyboard shortcuts
<li class="if">
<button tabindex="-1" role="menuitem" type="button" onClick="" class="if">
Save<span class="if keyboard-shortcut"
><kbd class="if">โ</kbd>+<kbd class="if">s</kbd></span
>
</button>
</li>
Icons
<li class="if">
<button tabindex="-1" role="menuitem" class="if" type="button">
<span aria-hidden="true" class="if icon ui log-out"></span>Sign out
</button>
</li>
Accessibility
Remember to use the correct role
, aria-
and html
-attributes for the menu options.
<nav
class="if dropdown-menu is-open"
tabindex="-1"
role="menu"
aria-labelledby="menu-0123-trigger"
id="menu-0123"
>
<ul class="if is-open">
<li class="if">
<button tabindex="-1" role="menuitem" class="if" type="button">Reimburse</button>
</li>
</ul>
</nav>
When the user navigates the Dropdown Menu with arrow keys, update the selected state with aria-selected
.
if (e.key == 'ArrowUp') {
nextElement = allOptions[--indexOfOptions];
if (!nextElement) {
indexOfOptions = allOptions.length - 1;
nextElement = allOptions[indexOfOptions];
}
removePreviouslySelectedMenuItem(menuList);
nextElement.classList.add('is-focused');
nextElement.setAttribute('aria-selected', true);
} else if (e.key == 'ArrowDown') {
nextElement = allOptions[++indexOfOptions];
if (!nextElement) {
indexOfOptions = 0;
nextElement = allOptions[indexOfOptions];
}
removePreviouslySelectedMenuItem(menuList);
nextElement.classList.add('is-focused');
nextElement.setAttribute('aria-selected', true);
}
Tokens
All of the tokens can be used as preprocessor and CSS variables
Dropdown Menu tokens
Name | Value | Is aliased in |
---|---|---|
$ids-dropdown-menu-border-radius |
0.375rem |
|
$ids-dropdown-menu-min-width |
3rem |
Changelog
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
14.22.2 (2022-05-03)
Miscellaneous chores
- package locks: update package locks (813eac7)
14.20.1 (2022-04-19)
Miscellaneous chores
- changelog: regenerate all CHANGELOG.md files (64ab385) , closes #586342
- changelog: regenerate all changelogs after updating changelog generation (70789c9) , closes #587270
14.18.3 (2022-04-13)
Bug Fixes
- changelog: generate new CHANGELOG.md files for root and
packages (349fda4)
,
closes #586063
. We regenerate the files to include all relevant commits and to use
conventional-commits
at 100%
14.16.0 (2022-04-07)
Bug Fixes
14.9.0 (2022-03-03)
Miscellaneous chores
- ๐ค Bootstrap (6822f5b)
14.8.1 (2022-02-23)
Bug Fixes
reinstall (d425056)
bootstrap (9a713df)
merge (2b1c5f1)
reinstall (5221600)
reinstall (147df55)
reinstall (afce1f2)
reinstall (67f3140)
-
Add changelog.md to files (3338314)
Reinstall (a2abf51)
14.2.2 (2021-12-10)
Code Refactoring
-
๐ก Change focus styles, remove whatinput (75fd31b) , closes #505205
-
rebuild and reinstall (f9fb687)
reinstall (885c74b)
-
fix changelogs manually (b1232b4)
reinstall (545a069)
reinstall (e149c2c)
13.12.3 (2021-11-09)
โ BREAKING CHANGES
- ๐งจ The scope for If Design System npm packages has now changed from
@if-design-system
to@ids-core
. We have also renamed the repository fromif-design-system
toids-core
- ๐งจ Util is now renamed to Utils
- ๐งจ We have now changed the navigation structure for the documentation site. Please update any saved links!
- ๐งจ Navigation structure has now changed. Please see release notes!
- ๐งจ The required JavaScript for the Dropdown Menu Component is now in a separate package, @ids-js/dropdown-menu
Documentation Updates
-
โ๏ธ Move position of the quick links (5cb0897)
-
โ๏ธ Remove unneeded margins for shortcuts (36c7e8d)
-
โ๏ธ Split out CSS documentation (105f4c6) , closes #467386
-
โ๏ธ Update links and change navigation structure (0bfd27d) , closes #490579
Code Refactoring
-
๐ก Reduce spacing tokens, use correct size tokens (97aa461)
-
๐ก Rename scope and repository (3ea5423)
-
๐ก Split out CSS and JS documentation, js to ids-js (8645212) , closes #467386
-
๐ก Use new navigation structure for documentation (415aee5) , closes #490579
-
another change in the structure (38a0d2e)
Miscellaneous chores
bootstrap (6fc1ed8)
reinstall (da80dba)
13.11.0 (2021-10-19)
Features
- ๐ธ Input field hot reload (eac76b7)
13.9.2 (2021-09-30)
Bug Fixes
- ๐ Complete the pseudo-element fix (1dcee2c)
13.7.0 (2021-09-22)
Documentation Updates
- โ๏ธ Update linking layout and naming (15c383b)
Miscellaneous chores
-
๐ค FIxing some layout issues, removing unwanted chars (0c3207f)
-
update preprocessor files for dropdown menu (256dffe)
13.6.3 (2021-09-17)
Bug Fixes
13.6.1 (2021-09-15)
Bug Fixes
- ๐ Adjust icon margin in dropdown menu (512d1d8)
13.6.0 (2021-09-08)
Documentation Updates
bootstrap (d23e139)
- ๐ค Use correct order for diff (cc6a4fd)
12.14.1 (2021-08-12)
Miscellaneous chores
12.13.1 (2021-08-11)
Bug Fixes
12.13.0 (2021-08-11)
Bug Fixes
12.12.1 (2021-08-10)
Bug Fixes
-
๐ Make sure components using fonts, have fonts bundled (d5bb642) , closes #354912
-
๐ค Remove .gitignore, use npm package.json files instead, ignore zip files for npm pack (49f0269) , closes #412081 . This will whitelist files to be used in "npm pack"
-
๐ค Reinstall (e660696)
-
๐ค Update published date (61e7ccf)
12.6.0 (2021-05-27)
Bug Fixes
-
๐ Manually set firstPublished and lastModified (e83af7d)
-
๐ We don't need lastModified (e458a12)
12.0.0 (2021-05-05)
โ BREAKING CHANGES
- ๐งจ All of the mixins have now been renamed
- ๐งจ Application Menu is now extracted and renamed to Dropdown Menu
Code Refactoring
-
๐ก Refactor & rename application menu - dropdown menu (d92f3bf) , closes #336508
-
๐ก Rename and consolidate mixins (67cf470) , closes #268081
Miscellaneous chores
-
๐ค PR fixes (87bdedd)
-
๐ค Reinstall (2c763ea)
-
๐ค Update all example references to old menu (81205ad)
rebuild (7edb430)