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à

WCAG 2.1

Livello AA — criteri pertinenti:

• 1.3.1 Informazioni e correlazioni — navigazione implementata con <nav> e lista <ul> semanticamente corretti
• 2.4.1 Salto di blocchi — in quanto navigazione secondaria, è consigliato includere skip link a monte nella pagina
• 4.1.2 Nome, Ruolo, Valore — aria-label identifica il ruolo e lo scopo della navigazione

Struttura e semantica

• Il componente è renderizzato come <div> contenitore con un <nav> interno — il <nav> è il landmark di navigazione
• La lista di link è una <ul> con elementi <li> — struttura semantica corretta

Attributi ARIA

Screen reader

• Gli screen reader annunciano il <nav> con l’etichetta fornita da aria-label prima di elencare i link
• Il parametro label è obbligatorio per l’accessibilità: senza di esso il landmark <nav> non ha nome

Varianti

Varianti di Layout

• tabs-only (default): Navigazione base con spaziatura standard; usata per menu di navigazione secondaria orizzontale
• dropdown-only: Navigazione con layout centrato (lg:justify-center) su desktop; usata per menu con voci a dropdown

Stili CSS

Classi Base

• .rtds-bottom-bar: Stile base della barra — lg:flex, colore di sfondo background-01

La maggior parte dello stile visivo viene applicata tramite le classi di utilità Tailwind passate come parametri di contesto (bgColor, verticalSpacing, positionClass, classes, navClasses, listGap, listClasses). Non esistono modificatori BEM aggiuntivi definiti nel CSS del componente.

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

Esempi di utilizzo

<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="Navigazione secondaria">
        <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">
            Sezione 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">
            Sezione 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">
            Sezione 3
        
         
        </a>
            </li>
        
        </ul>
    </nav>
    
</div>


<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"
    aria-haspopup="dialog"
    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"
    role="dialog"
    aria-modal="true"
    aria-label="Menu di navigazione"
  >
    <!-- 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>

Note

• Limite noto della documentazione (non del componente): nella preview isolata di Fractal, aprire un dropdown della variante dropdown-only può mostrare scrollbar orizzontale/verticale all’interno del riquadro di anteprima. Causa: il pannello di preview del tema Fractal (@frctl/mandelbrot) ha altezza fissa e ricalcola le dimensioni dell’iframe solo al load/resize, non quando un’interazione JS interna (apertura dropdown) fa crescere il contenuto. Non si verifica in una pagina reale, dove non c’è alcun wrapper ad altezza fissa attorno all’header (issue GitLab #29)