En-tête - Header

L’en-tête permet aux utilisateurs d’identifier sur quel site ils se trouvent. Il peut donner accès à la recherche et à certaines pages ou fonctionnalités clés.

En-tête complet

L’intégralité des options est exposée dans cet exemple mais composez selon vos besoins en privilégiant toujours l’accessibilité et la simplicité de votre page. Vous pouvez voir :

  • le nom du sponsor (requis)
  • le nom du service (requis)
  • le logo du service
  • un champ de recherche
  • des liens d’accès rapide
  • des liens directs
  • des liens direct déroulants.

Code

= dsfr_header logo_text: "Ministère du Travail", title: "Égapro", tagline: "Indice de parité professionelle" do |header|
  = header.with_operator_image title: "beta.gouv.fr", src: "/assets/images/logo-betagouvfr.svg", alt: "logo de beta.gouv.fr"
  = header.with_tool_link title: "Connexion", path: "#"
  = header.with_tool_link title: "Comment ça marche", path: "#"
  = header.with_tool_link title: "Contact", path: "#", html_attributes: { class: ["fr-btn", "fr-icon-mail-line"] }
  = header.with_direct_link_simple title: "Accueil", path: "#"
  = header.with_direct_link_simple title: "Ce service", path: "#"
  = header.with_direct_link_dropdown title: "L'équipe" do |dropdown|
    = dropdown.with_link title: "Beta Gouv", path: "#"
    = dropdown.with_link title: "DSFR", path: "#"
  = header.with_search do
    = form_with(url: "#") do |form|
      .fr-search-bar
        = form.label :query, "Rechercher", { class: 'fr-label' }
        = form.search_field :query, { class: 'fr-input' }
        %button.fr-btn{title: "Rechercher"} Rechercher

Résultat

<header class="fr-header" role="banner">
  <div class="fr-header__body">
    <div class="fr-container">
      <div class="fr-header__body-row">
        <div class="fr-header__brand fr-enlarge-link">
          <div class="fr-header__brand-top">
            <div class="fr-header__logo">
              <p class="fr-logo">
                Ministère du Travail
              </p>
            </div>
            <div class="fr-header__operator">
              <a href="/" title="beta.gouv.fr">
                <img class="fr-responsive-img" src="/assets/images/logo-betagouvfr.svg" alt="logo de beta.gouv.fr" style="max-width:9.0625rem;">
              </a>
            </div>
            <div class="fr-header__navbar">
              <button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-header-search" id="button-header-search" title="Rechercher">
                Rechercher
              </button>
              <button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-header-menu" aria-haspopup="menu" id="button-header-menu" title="Menu">
                Menu
              </button>
            </div>
          </div>
          <div class="fr-header__service">
            <a href="/" title="Accueil - Égapro">
              <p class="fr-header__service-title">
                Égapro
              </p>
            </a>
            <p class="fr-header__service-tagline">
              Indice de parité professionelle
            </p>
          </div>
        </div>
        <div class="fr-header__tools">
          <div class="fr-header__tools-links">
            <ul class="fr-btns-group">
              <li>
                <a href="#" class="fr-btn">
                  Connexion
                </a>
              </li>
              <li>
                <a href="#" class="fr-btn">
                  Comment ça marche
                </a>
              </li>
              <li>
                <a href="#" class="fr-btn fr-icon-mail-line">
                  Contact
                </a>
              </li>
            </ul>
          </div>
          <div class="fr-header__search fr-modal" id="modal-header-search">
            <div class="fr-container fr-container-lg--fluid">
              <button class="fr-btn--close fr-btn" aria-controls="modal-header-search" title="Fermer">
                Fermer
              </button>
              <div role="search" id="header-search">
                <form action="#" accept-charset="UTF-8" data-remote="true" method="post">
                  <input name="utf8" type="hidden" value="✓" autocomplete="off" />
                  <div class='fr-search-bar'>
                    <label class="fr-label">
                      Rechercher
                    </label>
                    <input class="fr-input" type="search" name="query" />
                    <button class='fr-btn' title='Rechercher'>
                      Rechercher
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="fr-header__menu fr-modal" id="modal-header-menu" aria-labelledby="button-header-menu" role="navigation">
    <div class="fr-container">
      <button class="fr-btn--close fr-btn" aria-controls="modal-header-menu" title="Fermer">
        Fermer
      </button>
      <div class="fr-header__menu-links">
        <!-- this seems to get autopopulated with the tool links with JS -->
      </div>
      <nav class="fr-nav" id="navigation-direct-links" role="navigation" aria-label="Menu principal">
        <ul class="fr-nav__list">
          <li class="fr-nav__item">
            <a href="#" class="fr-nav__link" target="_self">
              Accueil
            </a>
          </li>
          <li class="fr-nav__item">
            <a href="#" class="fr-nav__link" target="_self">
              Ce service
            </a>
          </li>
          <li class="fr-nav__item">
            <button class="fr-nav__btn" aria-expanded="false" aria-controls="menu-l-equipe">
              L'équipe
            </button>
            <div class="fr-collapse fr-menu" id="menu-l-equipe">
              <ul class="fr-menu__list">
                <li>
                  <a href="#" class="fr-nav__link" target="_self">
                    Beta Gouv
                  </a>
                </li>
                <li>
                  <a href="#" class="fr-nav__link" target="_self">
                    DSFR
                  </a>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</header>

En-tête avec liens personnalisés

Il n’est pas rare que l’action de déconnexion d’un utilisateur passe par un DELETE sur /sessions ou autre. Comme les liens (<a>) sont limités à GET il est possible d’outrepasser ça avec custom_tool_links qui permet par exemple d’insérer le combo formulaire/bouton dans ce cas :

Code

= dsfr_header logo_text: "Ministère du travail", title: "Égapro" do |header|
  - if "l'utilisateur est connecté"
    = header.with_tool_link title: "Vos services (Marie Curie)", path: '#', html_attributes: { class: "fr-icon-account-line" }
    = header.with_custom_tool_link do
      = button_to "Déconnexion", '#', { method: :delete, class: "fr-btn fr-icon-logout-box-r-line", data: { turbo: "false" } }

Résultat

<header class="fr-header" role="banner">
  <div class="fr-header__body">
    <div class="fr-container">
      <div class="fr-header__body-row">
        <div class="fr-header__brand fr-enlarge-link">
          <div class="fr-header__brand-top">
            <div class="fr-header__logo">
              <p class="fr-logo">
                Ministère du travail
              </p>
            </div>
            <div class="fr-header__navbar">
              <button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-header-menu" aria-haspopup="menu" id="button-header-menu" title="Menu">
                Menu
              </button>
            </div>
          </div>
          <div class="fr-header__service">
            <a href="/" title="Accueil - Égapro">
              <p class="fr-header__service-title">
                Égapro
              </p>
            </a>
          </div>
        </div>
        <div class="fr-header__tools">
          <div class="fr-header__tools-links">
            <ul class="fr-btns-group">
              <li>
                <a href="#" class="fr-btn fr-icon-account-line">
                  Vos services (Marie Curie)
                </a>
              </li>
              <li>
                <form class="button_to" method="post" action="#">
                  <input type="hidden" name="_method" value="delete" autocomplete="off" />
                  <input class="fr-btn fr-icon-logout-box-r-line" data-turbo="false" type="submit" value="Déconnexion" />
                </form>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="fr-header__menu fr-modal" id="modal-header-menu" aria-labelledby="button-header-menu" role="navigation">
    <div class="fr-container">
      <button class="fr-btn--close fr-btn" aria-controls="modal-header-menu" title="Fermer">
        Fermer
      </button>
      <div class="fr-header__menu-links">
        <!-- this seems to get autopopulated with the tool links with JS -->
      </div>
    </div>
  </div>
</header>

Plus d’informations