<div class="rtds-bottom-bar lg:rtds-py-2 is-second-last lg:justify-center">
<div class="rtds-bottom-bar__container rtds-container rtds-mx-auto rtds-flex rtds-items-center rtds-justify-center lg:rtds-flex-1">
<nav class="rtds-primary-navigation rtds-justify-center is-bottom-nav-positioned" aria-label="Principale" id="siteNavWrapper">
<button type="button" class="rtds-btn rtds-btn--only-text rtds-rounded-0 lg:rtds-hidden rtds-ml-auto rtds-btn--icon rtds-group" aria-expanded="false" aria-controls="mainNavPanel" id="mobileNavToggle">
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-m-0 rtds-p-0
rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform
group-hover:rtds-translate-none is-show-menu
group-aria-expanded:rtds-hidden" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--bars-3" />
</svg>
<svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6 rtds-m-0 rtds-p-0 rtds-transition-all
rtds-duration-200 rtds-ease-out rtds-transform
group-hover:rtds-translate-none is-close-menu rtds-hidden
group-aria-expanded:rtds-inline-block" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="rtds-sr-only is-show-menu">
Menu
</span>
</button>
<!-- Mobile panel -->
<div class="rtds-primary-navigation__panel rtds-flex-col rtds-transition-all rtds-invisible rtds-w-[88%] lg:rtds-w-auto rtds-fixed lg:rtds-static lg:rtds-visible rtds-top-[--header-height] rtds-bottom-0 rtds-left-[12%] lg:rtds-left-0 rtds-border-l rtds-border-primary lg:rtds-border-l-0 rtds-overflow-y-auto" id="mainNavPanel">
<!-- Main nav -->
<div class="rtds-primary-navigation__module is-main lg:rtds-border-b-0">
<ul class="rtds-primary-navigation__list lg:rtds-justify-center rtds-gap-2 lg:rtds-gap-2.5">
<li class="rtds-primary-navigation__item">
<a href="" class="rtds-primary-navigation__first-level rtds-primary-navigation__link rtds-group rtds-text-sm lg:rtds-text-base">
Item
</a>
</li>
<li class="rtds-primary-navigation__item">
<a href="" class="rtds-primary-navigation__first-level rtds-primary-navigation__link rtds-group rtds-text-sm lg:rtds-text-base is-current" aria-current="page">
Current page
</a>
</li>
<li class="rtds-dropdown-menu has-dropdown-menu rtds-primary-navigation__item">
<button class="rtds-dropdown-menu__trigger rtds-dropdown-trigger rtds-group rtds-w-full rtds-flex rtds-items-center hover:rtds-content-primary aria-expanded:rtds-bg-white lg:aria-expanded:rtds-bg-transparent aria-expanded:rtds-content-primary aria-expanded:rtds-relative rtds-p-3 rtds-gap-2 rtds-text-sm lg:rtds-text-base rtds-primary-navigation__first-level rtds-primary-navigation__link" aria-expanded="false" aria-controls="submenumenu-3">
Dropdown
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 rtds-ml-auto rtds-transition-all rtds-dropdown-menu__trigger-icon group-aria-expanded:-rtds-rotate-180" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-down" />
</svg>
</button>
<ul class="rtds-dropdown-menu__list rtds-hidden rtds-border rtds-border-t-0 lg:rtds-w-52 lg:rtds-border-t lg:rtds-rounded lg:rtds-shadow-md lg:rtds-absolute rtds-border-r-0 rtds-border-l-0 lg:rtds-border-r lg:rtds-border-l" id="submenumenu-3">
<li class="rtds-dropdown-menu__item rtds-group/menu-item">
<a class="rtds-dropdown-menu__link rtds-block rtds-transition rtds-text-sm lg:rtds-text-base group-first/menu-item:rtds-rounded-t group-last/menu-item:rtds-rounded-b" href="">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<span class="rtds-grow">List item</span>
</div>
</a>
</li>
<li class="rtds-dropdown-menu__item rtds-group/menu-item">
<a class="rtds-dropdown-menu__link rtds-block rtds-transition rtds-text-sm lg:rtds-text-base group-first/menu-item:rtds-rounded-t group-last/menu-item:rtds-rounded-b" href="">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<span class="rtds-grow">List item</span>
</div>
</a>
</li>
<li class="rtds-dropdown-menu__item rtds-group/menu-item">
<a class="rtds-dropdown-menu__link rtds-block rtds-transition rtds-text-sm lg:rtds-text-base group-first/menu-item:rtds-rounded-t group-last/menu-item:rtds-rounded-b" href="">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<span class="rtds-grow">List item</span>
</div>
</a>
</li>
<li class="rtds-dropdown-menu__item rtds-group/menu-item">
<a class="rtds-dropdown-menu__link rtds-block rtds-transition rtds-text-sm lg:rtds-text-base group-first/menu-item:rtds-rounded-t group-last/menu-item:rtds-rounded-b" href="">
<div class="rtds-flex rtds-gap-2 rtds-items-center">
<span class="rtds-grow">List item</span>
</div>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="rtds-primary-navigation__backdrop rtds-bg-black/25 rtds-top-[--header-height] lg:rtds-hidden"></div>
</nav>
</div>
</div>
{% extends '@bottom-bar' %}
{% block content %}
<div class="rtds-bottom-bar__container rtds-container rtds-mx-auto rtds-flex rtds-items-center rtds-justify-center lg:rtds-flex-1">
{% render '@primary-navigation', {classes: 'rtds-justify-center is-bottom-nav-positioned', navPanelClasses: 'rtds-flex-col rtds-transition-all rtds-invisible rtds-w-[88%] lg:rtds-w-auto rtds-fixed lg:rtds-static lg:rtds-visible rtds-top-[--header-height] rtds-bottom-0 rtds-left-[12%] lg:rtds-left-0 rtds-border-l rtds-border-primary lg:rtds-border-l-0 rtds-overflow-y-auto',listHorizontalAlignment:'lg:rtds-justify-center', listGap: 'rtds-gap-2 lg:rtds-gap-2.5',itemFontSize: 'rtds-text-sm lg:rtds-text-base', itemDropdownFontSize: 'rtds-text-sm lg:rtds-text-base'}, true %}
</div>
{% endblock %}
{
"label": "Label navigazione bottom",
"verticalSpacing": "lg:rtds-py-2",
"positionClass": "is-second-last",
"listGap": "rtds-gap-4",
"items": [
{
"label": "Item 1"
},
{
"label": "Item 2"
},
{
"label": "Item 3"
}
],
"classes": "lg:justify-center"
}
/**
* PRIMARY NAVIGATION
*
*/
@layer components {
.rtds-bottom-bar {
@apply lg:rtds-flex lg:rtds-background-01;
}
}
Componente per la barra di navigazione inferiore dell’header. Include un menu di navigazione accessibile e personalizzabile.
Il componente Bottom Bar è progettato per gestire menu di navigazione con supporto completo per l’accessibilità. Include:
Il componente è stato progettato seguendo le best practice di accessibilità WCAG 2.1:
aria-label) che descrive il suo scopo<nav> e <ul><ul>) per una corretta struttura semanticaIl componente è strutturato come segue:
<div class="rtds-bottom-bar [bgColor] [verticalSpacing] [positionClass] [classes]">
<nav class="lg:rtds-container lg:rtds-flex lg:rtds-justify-center [navClasses]" aria-label="[label]">
<ul class="rtds-grid lg:rtds-flex [listGap] [listClasses]">
<li class="[item.classes]">
<a class="rtds-p-2 rtds-content-01 rtds-font-medium rtds-text-sm lg:rtds-text-base">[item.label]</a>
</li>
</ul>
</nav>
</div>label: Testo dell’etichetta della navigazione (obbligatorio per l’accessibilità)bgColor: Classe CSS per il colore di sfondoverticalSpacing: Classe CSS per la spaziatura verticale (padding top e bottom)positionClass: Classe CSS per la gestione della posizione su mobile (gestita via JavaScript)classes: Classi CSS aggiuntive per il contenitore principalenavClasses: Classi CSS aggiuntive per l’elemento navlistGap: Classe CSS per lo spazio tra gli elementi della listalistClasses: Classi CSS aggiuntive per la listaitems: Array di oggetti contenenti gli elementi della navigazionelabel: Testo dell’elemento della navigazioneclasses: Classi CSS aggiuntive per l’elemento della listaIl componente include diverse possibilità di personalizzazione:
Ogni variante può essere utilizzata come base per personalizzazioni specifiche, mantenendo la coerenza con il design system.