Nijmegen Component Library
You are viewing version 6.0.0 of the library, the latest version is

Pills: Primary 

<div class="pills " role="menu">
    <div class="pills__item">
        <a class="pills__link" href="#" role="menuitem">Link 1</a>
    </div>
    <div class="pills__item">
        <a class="pills__link" href="#" role="menuitem" aria-current="true">Link 2</a>
    </div>
    <div class="pills__item">
        <button class="pills__button" role="menuitem">Button 2</button>
    </div>
    <div class="pills__item">
        <button class="pills__button" role="menuitem">Button 1</button>
    </div>
</div>

Pills

This component is for showing a set of buttons in a row. It can be used as menu or tabs for a tabbed page.

The role attribute

Make sure you use the right role attribute based on the usecase.

In this example we defined it as a menu, see the tabs component for an example where it is used as a tab.

Defining the active element

You can mark the active element by adding the attribute aria-current="true". If you have a specific use for the buttons (like page, location, date) you can use different values for aria-current. See this page for more examples.

When you are using the pills as tabs you can use aria-selected="true" to mark the currently selected tab.

Note

This component is rendered here with a example script so that you can select an item and see how it looks.