CSS ComponentThe latest version of this package is: 17.0.30-alpha.8, Opens in new window
An Accordion Menu is mostly used for mobile navigation or dashboards.
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/accordion-menu@17.0.30-alpha.8
Table of Contents
Edit this section, Opens in new windowUsage
Required markup
<nav class="if accordion-menu" role="menu">
<ul class="if">
<li class="if">
<a role="menuitem" class="if" href="/develop"> Develop </a>
</li>
<li class="if">
<a role="menuitem" class="if" href="/develop"> Resources </a>
</li>
<li class="if is-parent">
<a role="menuitem" href="/asd" class="if"> Introduction </a>
<div class="if accordion-menu">
<ul class="if">
<li class="if">
<a role="menuitem" href="/asdasd" class="if">
<span class="if icon ui house"></span>
Concept - Simply Personal
</a>
</li>
<li class="if">
<a role="menuitem" href="/asdasd" class="if">
The If Visual Identity at a glance
</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
Icon on menu item
<li class="if">
<button role="menuitem" type="button" class="if">
<span aria-hidden="true" class="if icon ui house"></span>
Hem
</button>
</li>
Accessibility
Remember to use the correct role
, aria-
, tabindex
and html
-attributes for the menu options.
Closed menu
<button
type="button"
aria-expanded="false"
aria-haspopup="true"
aria-controls="<id-for-menu-to-toggle>"
id="<id-for-menu-initiator>"
class="if โฆ"
>
โฆ
</button>
<nav
class="if accordion-menu"
tabindex="-1"
role="menu"
aria-labelledby="<id-for-menu-initiator>"
id="<id-for-menu-to-toggle>"
>
<ul class="if">
<li class="if">
<button tabindex="-1" role="menuitem" class="if" type="button">โฆ</button>
</li>
</ul>
</nav>
Here you see the markup of a closed menu. We have included a menu initiator in the markup to couple tings together.
The initiator
- Has
aria-expanded
, which is toggled depending on the state; set to false - Has
aria-haspopup
to indicate that this initiator has a popup/menu associated with it. - Has
aria-controls
to reference the menu that the initiator controls. This must be an unique identifier, and the same value as the id of the menu. id
is used as reference for the menu.
The menu holder
- Has
tabindex="-1"
, because it is not opened yet, and we do not want the user to tab into it yet. - Has
role
set tomenu
, to get the semantics in order and to indicate that this is a menu. - Has
aria-labelledby
, to reference the element that is used as the label for this menu.
The menu action
- Has
tabindex="-1"
, because it is not available yet, and we do not want the user to tab into it yet. - Has
role
set tomenuitem
, to get the semantics in order and to indicate that this is a menu item.
<button
role="menuitem"
type="button"
aria-expanded="true"
aria-haspopup="true"
aria-controls="<id-for-menu-to-toggle>"
id="<id-for-menu-initiator>"
class="if โฆ"
>
โฆ
</button>
<nav
class="if accordion-menu is-open"
role="menu"
aria-labelledby="<id-for-menu-initiator>"
id="<id-for-menu-to-toggle>"
>
<ul class="if is-open">
<li class="if">
<button role="menuitem" class="if" type="button">โฆ</button>
</li>
</ul>
</nav>
Here you see the markup of an opened menu. We have included a menu initiator in the markup to couple tings together.
We only cover the changed attributes here.
The initiator
- Has
aria-expanded
, which is toggled depending on the state; set to true
The menu holder
- Has
tabindex="-1"
removed, since the menu is now open
The menu action
- Has
tabindex="-1"
removed, since the menu is now open
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!
- ๐งจ CSS documentation is now on a different URL. The implementation JavaScript is extracted into a separate package, @ids-js/accordion-menu and to a new URL
Documentation Updates
-
โ๏ธ Move out css doc to new url, split out js docs (8d1f4f5) , closes #467386
-
โ๏ธ Move position of the quick links (5cb0897)
-
โ๏ธ Remove unneeded margins for shortcuts (36c7e8d)
-
โ๏ธ Update documentation (b1baa6d)
-
โ๏ธ Update links and change navigation structure (0bfd27d) , closes #490579
Code Refactoring
-
๐ก Reduce spacing tokens, use correct size tokens (97aa461)
-
๐ก Rename scope and repository (3ea5423)
-
๐ก 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.9.0 (2021-09-27)
Features
13.7.0 (2021-09-22)
Documentation Updates
- โ๏ธ Update linking layout and naming (15c383b)
13.6.3 (2021-09-17)
Bug Fixes
13.6.1 (2021-09-15)
Bug Fixes
-
๐ Fix focus ring issue in global header (e478bd2) , closes #457417
-
๐ Safeguard active and open states (e21bbdb)
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
- ๐งจ The Accordion Menu is now a separate component
Bug Fixes
-
๐ Remove border top on child items (b21cdcd)
-
๐ Reset border (d24d704)
-
๐ Use a border top on the parent menu (7948bee)
-
๐ Use is-open for display flex (6e383e5)
Code Refactoring
-
๐ก Extract Accordion Menu as a separate component (11b1974) , closes #336508
-
๐ก Rename and consolidate mixins (67cf470) , closes #268081
Documentation Updates
-
โ๏ธ Added element to fit aria-labelled by (4c6ddde)
-
โ๏ธ Remove "N/A" from empty sections (1e41446)
-
โ๏ธ Typo in the anatomy example for Accordion Menu (ec7410c)
-
๐ค Reinstall (2c763ea)
rebuild (7edb430)