Regione Toscana Design System

Header Bottom bar component: Tabs Only 

<div class="rtds-bottom-bar lg:rtds-py-2 is-second-last">

    <nav class="lg:rtds-container lg:rtds-flex lg:rtds-justify-center" aria-label="Label navigazione bottom">
        <ul class="rtds-grid lg:rtds-flex rtds-gap-4">

            <li class="">
                <a href="" class="rtds-link rtds-p-2 rtds-content-01 rtds-font-medium rtds-text-sm lg:rtds-text-base">
                    Item 1

                </a>
            </li>

            <li class="">
                <a href="" class="rtds-link rtds-p-2 rtds-content-01 rtds-font-medium rtds-text-sm lg:rtds-text-base">
                    Item 2

                </a>
            </li>

            <li class="">
                <a href="" class="rtds-link rtds-p-2 rtds-content-01 rtds-font-medium rtds-text-sm lg:rtds-text-base">
                    Item 3

                </a>
            </li>

        </ul>
    </nav>

</div>
 
<div class="rtds-bottom-bar{% if bgColor %} {{ bgColor }}{% endif %}{% if verticalSpacing %} {{ verticalSpacing }}{% endif %}{% if positionClass %} {{ positionClass }}{% endif %}{% if classes %} {{ classes }}{% endif %}">
     {% block content %}
    <nav class="lg:rtds-container lg:rtds-flex lg:rtds-justify-center{% if navClasses %} {{ navClasses }}{% endif %}" aria-label="{{ label }}">
        <ul class="rtds-grid lg:rtds-flex{% if listGap %} {{ listGap }}{% endif %}{% if listClasses %} {{ listClasses }}{% endif %}">
        {% for item in items %}
            <li class="{% if item.classes %}{{ item.classes }}{% endif %}">
                {% render '@link', { label: item.label, classes:'rtds-p-2 rtds-content-01 rtds-font-medium rtds-text-sm lg:rtds-text-base' }, true %}
            </li>
        {% endfor %}
        </ul>
    </nav>
    {% endblock %}
</div>
 
{
  "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"
    }
  ]
}
  • Content: 
    /**
 * PRIMARY NAVIGATION
 *
*/
@layer components {
    .rtds-bottom-bar {
        @apply lg:rtds-flex lg:rtds-background-01;
    }

}
  • URL: /components/raw/bottom-bar/bottom-bar.css
  • Filesystem Path: components/04-organisms/bottom-bar/bottom-bar.css
  • Size: 134 Bytes

Componente Bottom Bar

Componente per la barra di navigazione inferiore dell’header. Include un menu di navigazione accessibile e personalizzabile.

Comportamento e Funzionalità

Il componente Bottom Bar è progettato per gestire menu di navigazione con supporto completo per l’accessibilità. Include:

  • Gestione delle etichette per la navigazione
  • Personalizzazione degli spazi tra gli elementi
  • Classi personalizzabili per gli elementi della lista
  • Supporto per layout responsive
  • Gestione della posizione mobile tramite JavaScript

Accessibilità

Il componente è stato progettato seguendo le best practice di accessibilità WCAG 2.1:

Etichette

  • La navigazione è sempre associata a un’etichetta (aria-label) che descrive il suo scopo
  • Gli elementi della lista sono strutturati semanticamente con <nav> e <ul>

Struttura

  • La navigazione è implementata come lista non ordinata (<ul>) per una corretta struttura semantica

Markup e Struttura

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

Configurazioni per lo Sviluppo in Nunjucks

Parametri Disponibili

Etichetta e Identificazione

  • label: Testo dell’etichetta della navigazione (obbligatorio per l’accessibilità)

Stile e Layout

  • bgColor: Classe CSS per il colore di sfondo
  • verticalSpacing: 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 principale
  • navClasses: Classi CSS aggiuntive per l’elemento nav
  • listGap: Classe CSS per lo spazio tra gli elementi della lista
  • listClasses: Classi CSS aggiuntive per la lista

Elementi della Lista

  • items: Array di oggetti contenenti gli elementi della navigazione
    • label: Testo dell’elemento della navigazione
    • classes: Classi CSS aggiuntive per l’elemento della lista

Varianti

Il componente include diverse possibilità di personalizzazione:

  1. Default (tabs-only): Navigazione base con spaziatura standard
  2. Dropdown-only: Navigazione con layout centrato e stile specifico per dropdown

Ogni variante può essere utilizzata come base per personalizzazioni specifiche, mantenendo la coerenza con il design system.