Documentation
Basic
Extended
Blocks

Quick menu

Default


<ul class="quick-menu">
    <li class="quick-menu-item active">
        <a href="#" class="quick-menu-link">Days</a>
    </li>
    <li class="quick-menu-item">
        <a href="#" class="quick-menu-link">Weeks</a>
    </li>
    <li class="quick-menu-item">
        <a href="#" class="quick-menu-link">Months</a>
    </li>
    <li class="quick-menu-item">
        <a href="#" class="quick-menu-link">Years</a>
    </li>
</ul>
Small


<ul class="quick-menu small">
    <li class="quick-menu-item active">
        <a href="#" class="quick-menu-link">Days</a>
    </li>
    <li class="quick-menu-item">
        <a href="#" class="quick-menu-link">Weeks</a>
    </li>
    <li class="quick-menu-item">
        <a href="#" class="quick-menu-link">Months</a>
    </li>
    <li class="quick-menu-item">
        <a href="#" class="quick-menu-link">Years</a>
    </li>
</ul>
Extra small


<ul class="quick-menu x-small">
    <li class="quick-menu-item active">
        <a href="#" class="quick-menu-link">Days</a>
    </li>
    <li class="quick-menu-item">
        <a href="#" class="quick-menu-link">Weeks</a>
    </li>
    <li class="quick-menu-item">
        <a href="#" class="quick-menu-link">Months</a>
    </li>
    <li class="quick-menu-item">
        <a href="#" class="quick-menu-link">Years</a>
    </li>
</ul>
SASS reference
--r-quick-menu-background: var(--r-color-light);
--r-quick-menu-link-hover-background: var(--r-color-light-darken-30);

If you need to prevent default link behavior and switch active class on click, you need to use JavaScript. Example code

const quickMenus = document.querySelectorAll('.quick-menu');

quickMenus.forEach(quickMenu => {
    const quickMenuItems = quickMenu.querySelectorAll('.quick-menu-item');
    const quickMenuLinks = quickMenu.querySelectorAll('.quick-menu-link');

    quickMenuItems.forEach(item => {
        item.addEventListener('click', () => {
            quickMenuItems.forEach(i => {
                i.classList.remove('active');
            });

            item.classList.add('active');
        });
    });

    quickMenuLinks.forEach(link => {
        link.addEventListener('click', e => {
            e.preventDefault();
        });
    });
});