§@gravity-ui/navigation ·

§Navigation de l'en-tête latéral · Aperçu →

§Installation

npm install @gravity-ui/navigation

Assurez-vous que les dépendances pair sont installées dans votre projet

npm install --dev @gravity-ui/uikit@^7.2.0 @gravity-ui/icons@^2.2.0 @bem-react/classname@^1.6.0 react@^19.0.0 react-dom@^19.0.0

§Utilisation

Rendez AsideHeader comme la structure de l'application. C'est un composant contrôlé — vous gérez l'état réduit via compact/onChangeCompact — et le contenu de votre page passe par renderContent. Configurez d'abord les styles de @gravity-ui/uikit et ThemeProvider (voir le guide des styles uikit).

import React from 'react';
import {AsideHeader} from '@gravity-ui/navigation';
import {Gear, House} from '@gravity-ui/icons';
import {ThemeProvider} from '@gravity-ui/uikit';

import '@gravity-ui/uikit/styles/styles.css';

export function App() {
  const [compact, setCompact] = React.useState(false);

  return (
    <ThemeProvider theme="light">
      <AsideHeader
        logo={{text: 'Mon App', href: '/'}}
        compact={compact}
        onChangeCompact={setCompact}
        menuItems={[
          {id: 'home', title: 'Accueil', icon: House, current: true},
          {id: 'settings', title: 'Paramètres', icon: Gear},
        ]}
        renderContent={() => <main>Contenu de la page</main>}
      />
    </ThemeProvider>
  );
}

§Sandboxes

Basique https://codesandbox.io/p/devbox/navigation-demo-simple-x9k5sd

Avancé https://codesandbox.io/p/devbox/recursing-dawn-6kc9vh

§Feuille de route 2025

1. Prise en charge du SSR
2. Ajouter plus de documentation et d'exemples à Gravity UI
3. Prise en charge de la navigation dans le thèmer UIKit
4. Unifier les API de subheaderItem, menuItem, footerItem

§Composants

• AsideHeader
  • AllPagesPanel
  • PageLayout
• PageLayoutAside
• AsideFallback
• FooterItem
• Logo
• Drawer
• DrawerItem
• MobileHeader
• MobileHeaderFooterItem
• MobileLogo
• HotkeysPanel
• Footer
• MobileFooter
• ActionBar
• Settings

§API CSS

Utilisé pour la thémisation des composants de Navigation

§Licence

Distribué sous la licence MIT. Voir LICENSE pour les détails.

§Pour les agents IA

Composants de navigation pour la structure d'application des applications Gravity UI — la barre latérale AsideHeader rétractable, ainsi que les pieds de page, les tiroirs, le logo, les panneaux de raccourcis clavier et les paramètres qui encadrent une page entière.

§Quand l'utiliser

• La structure de navigation principale de l'application : AsideHeader (navigation latérale rétractable) avec menuItems, sections de sous-en-tête et de pied de page.
• Interface utilisateur de support : Drawer/DrawerItem, Footer/MobileFooter, MobileHeader, HotkeysPanel, Settings, ActionBar, Logo.
• Mise en page du contenu de la page dans la structure de navigation via renderContent / PageLayout.

§Quand ne pas l'utiliser

• Contrôles génériques dans la page (boutons, onglets, menus, fil d'Ariane) — utilisez @gravity-ui/uikit ; ce package est le chrome externe de l'application, pas des composants généraux.
• Rendu du corps de la page lui-même à partir de la configuration — utilisez @gravity-ui/page-constructor.
• Routage côté client — ceci fournit uniquement l'interface de navigation ; connectez les clics à votre propre routeur.

§Pièges courants

• AsideHeader est contrôlé. Vous devez gérer l'état réduit avec compact et le mettre à jour dans onChangeCompact ; passer compact sans le gestionnaire fige la barre latérale.
• Les éléments de menu sont menuItems, indexés par id. Chaque élément est {id, title, icon, current, onItemClick}; icon accepte un composant d'icône (par exemple, de @gravity-ui/icons), pas un nom de chaîne.
• Les dépendances pair sont requises. @gravity-ui/uikit, @gravity-ui/icons, et @bem-react/classname doivent être installés aux côtés de react/react-dom.
• Nécessite une configuration uikit. Rendez à l'intérieur de ThemeProvider et importez @gravity-ui/uikit/styles/styles.css, sinon la structure s'affichera sans style.
• Le contenu de la page passe par renderContent. Rendez votre contenu routé via la prop renderContent / PageLayout, pas comme children.