---
title: "Personnalisation"
description: "Découvrez comment surcharger les composants intégrés dans Docus pour personnaliser votre documentation."
canonical_url: "https://docus.dev/fr/concepts/customization"
---
# Personnalisation

> Découvrez comment surcharger les composants intégrés dans Docus pour personnaliser votre documentation.

Docus est construit sur Nuxt 4 qui offre un système de couches de composants flexible permettant de surcharger certaines parties de l'UI en redéfinissant des composants spécifiques dans votre propre application. Cela facilite la personnalisation complète de l'apparence visuelle et du comportement de votre documentation sans toucher au thème principal.

Pour surcharger un composant, créez simplement un fichier Vue du même nom dans le dossier `components/`. Docus utilisera automatiquement votre version à la place de celle par défaut.

## En-tête de l'application

Vous pouvez personnaliser différentes parties du header en surchargant les composants suivants :

### `AppHeaderLogo`

Pour des ajustements simples comme changer la taille du logo, vous pouvez utiliser l'option `logo.class` dans `app.config.ts` sans surcharger le composant (ex. `class: 'h-8'`).

Pour remplacer entièrement le logo par défaut dans l'en-tête, créez le fichier `components/AppHeaderLogo.vue`. Votre composant remplacera celui fourni par le thème Docus. Vous pouvez utiliser le composable `useLogoAssets()` pour conserver le menu contextuel de clic droit avec les actions de copie et téléchargement.

![Visualisation du logo d'en-tête](https://docus.dev/documentation/app-header-logo.webp)

<u-button color="neutral" icon="i-lucide-code-xml" to="https://github.com/nuxt-content/docus/blob/app/components/app/AppHeaderLogo.vue" variant="link">

Code du composant par défaut

</u-button>

### `AppHeaderLeft`

Le logo est placé dans un lien d'accueil par défaut. Pour modifier ce lien (URL, attributs) ou la mise en page autour de `AppHeaderLogo`, surchargez plutôt `components/AppHeaderLeft.vue`.

<u-button color="neutral" icon="i-lucide-code-xml" to="https://github.com/nuxt-content/docus/blob/main/layer/app/components/app/AppHeaderLeft.vue" variant="link">

Code du composant par défaut

</u-button>

### `AppHeaderCTA`

Pour personnaliser la zone d'appel à l'action dans l'en-tête (par exemple, ajouter un bouton « Commencer » ou un lien externe), surchargez le composant `components/AppHeaderCTA.vue`.

![Visualisation du CTA d'en-tête](https://docus.dev/documentation/app-header-cta.webp)

<note to="https://github.com/nuxt-content/docus/blob/docs/components/AppHeaderCTA.vue">

Par défaut, ce composant est vide mais vous pouvez voir comment nous le surchargeons sur la documentation Docus elle-même.

</note>

### `AppHeaderCenter`

Pour personnaliser la zone centrale du header, surchargez le composant `components/AppHeaderCenter.vue`. Votre composant remplacera la barre de recherche fournie par le thème Docus.

![Visualisation du centre d'en-tête](https://docus.dev/documentation/app-header-center.webp)

<u-button color="neutral" icon="i-lucide-code-xml" to="https://github.com/nuxt-content/docus/blob/app/components/app/AppHeaderCenter.vue" variant="link">

Code du composant par défaut

</u-button>

### `AppHeaderBody`

Par défaut, lorsque vous ouvrez le menu en vue mobile, Docus affiche l'arborescence de votre dossier `content/` comme menu avec le composant [ContentNavigation](https://ui.nuxt.com/components/content-navigation). Vous pouvez surcharger ce menu avec le composant `components/AppHeaderBody.vue` et remplir le corps du menu (sous l'en-tête) en mobile.

![Visualisation du menu mobile](https://docus.dev/documentation/app-header-body.webp)

<u-button color="neutral" icon="i-lucide-code-xml" to="https://github.com/nuxt-content/docus/blob/app/components/app/AppHeaderBody.vue" variant="link">

Code du composant par défaut

</u-button>

### `AppHeaderBottomRight`

Lorsque [`navigation.sub`](https://docus.dev/fr/concepts/configuration#sous-navigation) est défini sur `'header'`, Docus affiche une barre d'onglets secondaire sous l'en-tête. Pour ajouter du contenu personnalisé à droite de cette barre (ex. un toggle, un badge), créez un composant `components/AppHeaderBottomRight.vue`.

<note to="https://github.com/nuxt-content/docus/blob/main/layer/app/components/app/AppHeaderBottom.vue">

Pour remplacer entièrement la barre de sous-navigation, surchargez le composant `AppHeaderBottom.vue` à la place.

</note>

<tip to="https://docus.dev/fr/concepts/nuxt">

Si vous souhaitez personnaliser tout le header, vous devriez peut-être envisager d'utiliser un layout personnalisé.

</tip>

## Footer

Vous pouvez personnaliser différentes parties du footer en surchargant les composants suivants :

### `AppFooterLeft`

Pour remplacer le côté gauche du footer, créez le fichier `components/AppFooterLeft.vue`. Votre composant remplacera celui par défaut fourni par le thème Docus.

![Visualisation du footer gauche](https://docus.dev/documentation/app-footer-left.webp)

<u-button color="neutral" icon="i-lucide-code-xml" to="https://github.com/nuxt-content/docus/blob/main/layer/app/components/app/AppFooterLeft.vue" variant="link">

Code du composant par défaut

</u-button>

### `AppFooterRight`

Pour personnaliser le côté droit du footer, surchargez le composant `components/AppFooterRight.vue`.

![Visualisation du footer droit](https://docus.dev/documentation/app-footer-right.webp)

<u-button color="neutral" icon="i-lucide-code-xml" to="https://github.com/nuxt-content/docus/blob/main/layer/app/components/app/AppFooterRight.vue" variant="link">

Code du composant par défaut

</u-button>

<tip to="https://docus.dev/fr/concepts/nuxt">

Si vous souhaitez personnaliser tout le footer, vous devriez peut-être envisager d'utiliser un layout personnalisé.

</tip>

## Docs

Vous pouvez aussi personnaliser l'en-tête et les deux asides des pages de documentation.

### `DocsPageHeaderLinks`

Dans la partie droite du header de votre page de documentation, le comportement par défaut de Docus est d'afficher un menu déroulant avec des actions rapides liées à la source Markdown de la page courante. Cela permet au lecteur de :

- **Copier un lien direct** vers le fichier `.md` brut dans le presse-papiers.
- **Voir la source Markdown** dans un nouvel onglet du navigateur.
- **Ouvrir le contenu de la page dans ChatGPT ou Claude**, pré-rempli avec une invite pour analyser le fichier Markdown.

Ces actions sont particulièrement utiles pour les contributeurs, lecteurs ou workflows assistés par IA, mais vous pouvez créer votre propre composant `components/DocsPageHeaderLinks.vue` pour le surcharger.

![App Page Header Links](https://docus.dev/documentation/app-page-header-links.webp)

<u-button color="neutral" icon="i-lucide-code-xml" to="https://github.com/nuxt-content/docus/blob/app/components/docs/DocsHeaderRight.vue" variant="link">

Code du composant par défaut

</u-button>

### `DocsAsideRightBottom`

Pour personnaliser la partie basse de l'aside droit des pages de documentation, créez le composant `components/DocsAsideRightBottom.vue`. Votre composant remplacera la table des matières basse fournie par le thème Docus.

![Docs aside droit bas](https://docus.dev/documentation/docs-aside-right-bottom.webp)

<u-button color="neutral" icon="i-lucide-code-xml" to="https://github.com/nuxt-content/docus/blob/app/components/docs/DocsAsideRightBottom.vue" variant="link">

Code du composant par défaut

</u-button>

### `DocsAsideLeftTop`

Pour personnaliser la partie haute de l'aside gauche des pages de documentation, créez le composant `components/DocsAsideLeftTop.vue`.

![Docs Aside Left Top](https://docus.dev/documentation/docs-aside-left-top.webp)

<note to="https://github.com/nuxt/image/blob/docs/docus/docus/app/components/DocsAsideLeftTop.vue">

Par défaut, ce composant est vide mais vous pouvez voir comment nous le surchargeons sur la documentation Nuxt Image.

</note>

## Icônes personnalisées

Docus utilise [Nuxt Icon](https://github.com/nuxt/icon) avec le fournisseur [Iconify](https://iconify.design/), vous donnant accès à des milliers d'icônes prêtes à l'emploi (ex. `i-lucide-arrow-right`, `i-simple-icons-github`).

Pour ajouter vos propres icônes, placez des fichiers SVG dans le dossier `assets/icons/` de votre application. Ils sont automatiquement enregistrés sous le préfixe `custom` et disponibles partout dans votre projet.

```text
assets/
  icons/
      my-logo.svg
```

Vous pouvez ensuite les utiliser avec le préfixe `i-custom:` :

```md [content/getting-started.md]
---
navigation:
  icon: i-custom:my-logo
---
```

```ts [app.config.ts]
export default defineAppConfig({
  toc: {
    bottom: {
      links: [{
        icon: 'i-custom:my-logo',
        label: 'Aperçu',
        to: '/preview'
      }]
    }
  }
})
```

```vue [components/MyComponent.vue]
<template>
  <UIcon name="i-custom:my-logo" />
</template>
```

<tip to="https://iconify.design/docs/icons/icon-set-basics.html">

Les fichiers SVG doivent utiliser `currentColor` pour les remplissages et contours afin que l'icône s'adapte à la couleur du texte.

</tip>


## Sitemap

See the full [sitemap](https://docus.dev/sitemap.md) for all pages.