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.0

Preview

<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>

<li class="if">
    <button role="menuitem" type="button" class="if">
        <span aria-hidden="true" class="if icon ui house"></span>
        Hem
    </button>
</li>

Edit this section

Remember to use the correct role, aria-, tabindex and html-attributes for the menu options.

<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>

Closed menu

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 to menu, 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 to menuitem, 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>

Opened menu

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

Edit this section

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

🐛 Add missing imports for global CSS Variables (fbf6f06) , closes #582437

14.9.0 (2022-03-03)

Miscellaneous chores

🤖 Bootstrap (6822f5b)

14.8.1 (2022-02-23)

Bug Fixes

🐛 Add missing imports of typography CSS variables (e716c65) , closes #559412

reinstall (d425056)

bootstrap (9a713df)

merge (2b1c5f1)

reinstall (5221600)

reinstall (147df55)

use correct versions (f1b5deb)
Add engines for all packages (e95dfff)

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)

reinstall.. again.. (8f5efa8)
revert to v13.12.2 (2ff5399)

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 from if-design-system to ids-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

✏️ Documentation adjustments (73c09e3) , closes #467386
✏️ 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

💡 Categorize components (9965266) , closes #490579
💡 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

🤖 Prune changelogs (2c660c2)
🤖 Rename util to utils (f78721f)

bootstrap (6fc1ed8)

fix all old references to util (d57bf17)
prepare for merge (0184490)

reinstall (da80dba)

Rename scope and repo (257684e)
use correct version for utils (49e72d9)

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

🎸 Add a better dev reload setup for css (a01949c) , closes #468494

13.7.0 (2021-09-22)

Documentation Updates

✏️ Update linking layout and naming (15c383b)

13.6.3 (2021-09-17)

Bug Fixes

🐛 Update repository urls (3dae3a3) , closes #465976

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

Use default shortcut listing for demo links (a746602)
🤖 Use node v14 (4009973)

bootstrap (d23e139)

🤖 Use correct order for diff (cc6a4fd)

12.14.1 (2021-08-12)

Miscellaneous chores

🤖 Add ci task to package.json without tests (21222e0) , closes #457627

12.13.1 (2021-08-11)

Bug Fixes

🐛 Whitelist docs dir for npm packaging (1a5cfd0) , closes #457621

12.13.0 (2021-08-11)

Bug Fixes

🐛 Use correct zindexes (1ced974) , closes #454896

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)

Edit this section

CSS ComponentThe latest version of this package is: 17.0.30-alpha.0, Opens in new window

Table of Contents

Usage

Required markup

Icon on menu item

Accessibility

Closed menu

Changelog

Change Log

14.22.2 (2022-05-03)

Miscellaneous chores

14.20.1 (2022-04-19)

Miscellaneous chores

14.18.3 (2022-04-13)

Bug Fixes

14.16.0 (2022-04-07)

Bug Fixes

14.9.0 (2022-03-03)

Miscellaneous chores

14.8.1 (2022-02-23)

Bug Fixes

14.2.2 (2021-12-10)

Code Refactoring

13.12.3 (2021-11-09)

⚠ BREAKING CHANGES

Documentation Updates

Code Refactoring

Miscellaneous chores

13.11.0 (2021-10-19)

Features

13.9.2 (2021-09-30)

Bug Fixes

13.9.0 (2021-09-27)

Features

13.7.0 (2021-09-22)

Documentation Updates

13.6.3 (2021-09-17)

Bug Fixes

13.6.1 (2021-09-15)

Bug Fixes

13.6.0 (2021-09-08)

Documentation Updates

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

12.6.0 (2021-05-27)

Bug Fixes

12.0.0 (2021-05-05)

⚠ BREAKING CHANGES

Bug Fixes

Code Refactoring

Documentation Updates