An open API service indexing awesome lists of open source software.

https://github.com/valentinmadiot/components-navigation_ui

Collection de 9 composants React de navigation : barres supérieure, inférieure et latérale. Designs modernes, responsive, code modulaire et réutilisable pour vos interfaces web.
https://github.com/valentinmadiot/components-navigation_ui

css frontend hooks html javascript mobile-navbar navbar navigation-component react react-component react-router responsive responsive-design sidebar topbar ui-components ux-ui vercel vite web-design

Last synced: 3 months ago
JSON representation

Collection de 9 composants React de navigation : barres supérieure, inférieure et latérale. Designs modernes, responsive, code modulaire et réutilisable pour vos interfaces web.

Awesome Lists containing this project

README

          



Aperçu des composants de navigation


🧭 Composants de Navigation


##
📌 Sommaire

    🎨   [**Introduction**](#introduction)

    🛠️   [**Technologies**](#technologies)

    🎯   [**Fonctionnalités**](#fonctionnalités)

    🚀   [**Installation**](#installation)

##
🎨 Introduction

Ce projet React propose 9 barres de navigation modernes réparties en 3 catégories :

- Barre du Haut : Menu principal en haut de page
- Barre Latérale : Menu latéral fixe ou déroulant
- Barre du Bas : Navigation positionnée en bas pour mobile

Chaque composant est conçu pour être responsive, modulaire et facilement intégrable dans vos projets web (dashboard, app mobile, SaaS...).

##
🛠️ Technologies

- React 18 + Vite
- React Router DOM + React Icons
- CSS natif modulaire (1 fichier par composant)
- Hooks React : `useState`, `useEffect`, `useRef`
- Convention BEM : `navX__element`
- Déploiement sur [**Vercel**](https://components-navigation.vercel.app/)

##
🎯 Fonctionnalités

- 9 composants de navigation répartis par type
- Design responsive (mobile & desktop)
- Menus déroulants, sous-menus, toggles dynamiques
- Transitions CSS fluides & comportement actif intelligent
- Comportements dynamiques (menus actifs, fermeture auto, etc.)
- Routage intégré avec bouton de retour
- Composants prêts à l’emploi pour tout type de layout

##
🚀 Installation

### ✅ Prérequis

- [Git](https://git-scm.com/)  —  Système de gestion de versions
- [Node.js](https://nodejs.org/fr)  —  Exécuteur local de scripts JavaScript
- [npm](https://www.npmjs.com/)  —  Gestionnaire de paquets JavaScript
- [Google Chrome](https://www.google.com/)  —  Navigateur moderne
- [Visual Studio Code](https://code.visualstudio.com/)  —  Éditeur de code

### 📥 Cloner le projet

```bash
git clone https://github.com/ValentinMadiot/components-navigation_ui
cd components-navigation_ui
```

### ▶️ Lancer le projet

#### Frontend

```bash
npm install
npm run dev
```

Frontend disponible sur : `http://localhost:5173`