> For the complete documentation index, see [llms.txt](https://ds5.gitbook.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ds5.gitbook.io/documentation/components/header.md).

# Header

{% hint style="info" icon="figma" %}
Nom du composant : **header**
{% endhint %}

***

{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=6814-4389&page-id=6814:495&scaling=scale-down-width&starting-point-node-id=6814:4389&t=hj8IXonFhOCeUBFO-1&viewport=234,788,1.09>" %}

***

### Principes

#### Centralité de la recherche

La barre de recherche doit être l'élément visuel dominant. Son importance reflète l'usage principal du site : un accès direct et rapide au catalogue via des mots-clés ou des références.

#### Hiérarchie de service

Les accès fonctionnels (Compte, Panier, Aide) sont regroupés à droite pour créer un pôle de service distinct de la navigation commerciale, facilitant ainsi la gestion du parcours client.

#### Urgence promotionnelle

La barre supérieure (Top Bar) utilise un contraste de couleur fort pour isoler les messages à durée limitée. Elle doit rester succincte pour ne pas entraver la visibilité de la navigation principale.

#### Double navigation

Le menu offre deux modes d'exploration : accès au catalogue ("Tous nos produits") et des entrées contextuelles (Promotions, Nouveautés)

***

### Composant lié

{% content-ref url="/pages/L7JpsCxRVv8IXgB5xHcV" %}
[Bouton header](/documentation/components/button-header.md)
{% endcontent-ref %}

{% content-ref url="/pages/RfeuCewsemiLcJS4FH3l" %}
[Barre de recherche](/documentation/components/searchbar.md)
{% endcontent-ref %}

{% content-ref url="/pages/X5jVI1da8wv0fY4tcExg" %}
[Bouton](/documentation/components/button.md)
{% endcontent-ref %}