Navigation — Lumy UI

En-tête

LUMY

<header class="lumy-header">
    <div class="lumy-container lumy-header__inner">
        <span class="lumy-logo lumy-text-gradient">LUMY</span>
        <button class="lumy-btn lumy-btn--blue lumy-btn--sm">
            Connexion
        </button>
    </div>
</header>

HTML

Identité de marque

Le composant .lumy-brand associe le logo Lumy à un badge court ou à un nom de produit. Le logo et son complément restent séparés afin de conserver une hiérarchie visuelle claire.

Logo avec badge

Utilisez un badge pour afficher une indication courte comme UI, Beta, Pro ou Labs.

HTML

<a href="/" class="lumy-brand" aria-label="Lumy UI">
    <span class="lumy-logo" aria-hidden="true">LUMY</span>
    <span class="lumy-badge lumy-badge--beta">UI</span>
</a>

Logo avec nom de produit

Utilisez .lumy-brand__text pour afficher le nom d’un produit, d’une verticale ou d’un programme à côté du logo, par exemple for Education.

ℹ️

Utilisation du nom de marque

Il est nécessaire d'écrire une majuscule à la première lettre du nom de marque, même si le nom de produit est en minuscules. Par exemple : Lumy For Education et non Lumy for education.

HTML

<a href="/" class="lumy-brand" aria-label="Lumy for Education">
    <span class="lumy-logo" aria-hidden="true">LUMY</span>
    <span class="lumy-brand__text">For Education</span>
</a>

Onglets

Le changement d'onglet actif (is-active + aria-selected) est géré automatiquement par ui.js.

<div class="lumy-tabs" role="tablist" aria-label="Résultats">
    <button class="lumy-tab" role="tab" aria-selected="true"
        aria-controls="panel-a" id="tab-a">
        Tous
    </button>

    <button class="lumy-tab" role="tab" aria-selected="false"
        aria-controls="panel-b" id="tab-b">
        Discuter avec Aura
    </button>

    <button class="lumy-tab" role="tab" aria-selected="false"
        aria-controls="panel-c" id="tab-c">
        Images
    </button>
</div>

HTML

Menu déroulant

Ajoute data-lumy-dropdown-trigger sur le bouton déclencheur ; l'ouverture/fermeture est gérée par ui.js.

<div class="lumy-dropdown">
    <button class="lumy-btn lumy-btn--square"
        data-lumy-dropdown-trigger
        aria-expanded="false"
        aria-label="Ouvrir les applications">
        ⠿
    </button>

    <div class="lumy-dropdown__menu">
        <a class="lumy-dropdown__item" href="#">📬 Lumy Mail</a>
        <a class="lumy-dropdown__item" href="#">🗣️ Lumy Translate</a>
        <a class="lumy-dropdown__item" href="#">🧠 Aura</a>
    </div>
</div>

HTML

Pied de page

<footer class="lumy-footer lumy-text-center">
    Lumy Corporation — Indexation ouverte internationale.
</footer>

HTML

Accessibilité

Les onglets utilisent role="tablist", role="tab" et aria-selected.
Le bouton de menu déroulant doit avoir aria-expanded à jour (géré par ui.js).
La touche Échap ferme les menus déroulants ouverts.