# Navigation latérale repliable

Source : https://docs.berkios.online/galerie/navigation-laterale/ · Section : Galerie · Documentation officielle BERKIOS (https://docs.berkios.online)


Un espace de gestion avec menu à gauche, contenu à droite et un bouton pour replier le menu.

Télécharger l'exemple : https://github.com/berkiosbuinu-server/examples/releases/latest/download/08-navigation-laterale.zip

**Type :** BERKIOS Studio · **Niveau :** intermédiaire · **Fichier :** `navigation-laterale-repliable.berkios.json`

## Ce que vous allez apprendre

- Construire un « cadre » d'application : un menu fixe et une zone de contenu qui change.
- Relier des boutons de menu à des interfaces.
- Replier et déplier la barre latérale.

## Avant de commencer

[Installer le Studio](https://docs.berkios.online/commencer/telecharger/). Il est utile d'avoir fait [Gestion des clients](https://docs.berkios.online/galerie/gestion-des-clients/).

## Étape 1 : importer l'exemple

**Fichier → Importer**, puis choisissez `navigation-laterale-repliable.berkios.json`.

## Étape 2 : comprendre la structure

Le projet contient **cinq interfaces** :

| Interface | Rôle |
|---|---|
| Application principale : navigation | Le cadre : barre latérale + zone de contenu à droite. |
| Tableau de bord : contenu | Section affichée au départ (indicateurs et activité récente). |
| Produits | Section avec un tableau de produits. |
| Ventes | Section avec un tableau de ventes. |
| Paramètres | Section de réglages. |

L'interface principale contient un panneau sombre à gauche (la barre latérale), la marque BERKIOS GESTION, quatre boutons de menu (Tableau de bord, Produits, Ventes, Paramètres), un profil et un grand panneau vide à droite : la **zone de contenu**.

## Étape 3 : les trois réglages de l'interface principale

Sélectionnez l'interface principale et ouvrez ses propriétés. Trois réglages font tout :

| Propriété | Valeur dans l'exemple | Rôle |
|---|---|---|
| `contentHostWidgetId` | le panneau de droite | Le panneau qui accueille les sections. |
| `contentDefaultInterfaceId` | « Tableau de bord : contenu » | La section affichée au démarrage. |
| `sidebarWidgetId` | la barre latérale | Le panneau qui se masque quand on replie le menu. |

## Étape 4 : tester dans l'aperçu

1. Passez en mode **Aperçu**.
2. Cliquez sur **Produits**, **Ventes**, **Paramètres** : la section change.
3. Cliquez sur le bouton **☰** en haut à gauche : la barre latérale se masque et le contenu occupe toute la largeur.
4. Cliquez de nouveau pour la rouvrir.

## À savoir

Les boutons de menu de cet exemple utilisent l'action **Ouvrir une interface** (`open-interface`). Le Studio propose aussi une action dédiée, **Afficher dans la zone de contenu** (`navigate-content`), pensée pour ce type de cadre : la barre latérale reste en place et seule la zone de droite change. Si, dans votre version, une section s'ouvre en remplaçant tout l'écran, passez les boutons de menu sur cette action.

## À vous de jouer

Ajoutez une cinquième section « Clients » : créez une nouvelle interface, ajoutez un bouton **Clients** dans le menu, et pointez-le vers cette interface.

## Pour aller plus loin

- Exemple suivant : [Outil en ligne de commande](https://docs.berkios.online/galerie/outil-en-ligne-de-commande/)
- Pages techniques : [Code d'interface et navigation](https://docs.berkios.online/studio/code-interface-et-navigation/), [Écrans modulaires](https://docs.berkios.online/studio/ecrans-modulaires/)