---
title: "Sage 8 : Navigation Bootstrap,  partikuls"
description: "Intégrez un menu Bootstrap dans un thème WordPress Sage 8 avec un Navwalker : chargement de la classe PHP et configuration du menu dans le header."
url: https://www.partikuls.com/fr/ressources/sage-8-navigation-bootstrap/
lang: fr
---

WordPress7 mars 20201 min de lecture

# Sage 8 : Navigation Bootstrap

Intégrez un menu Bootstrap dans un thème WordPress Sage 8 avec un Navwalker : chargement de la classe PHP et configuration du menu dans le header.

Publié par [Partikuls](https://www.partikuls.com/fr/agence/)

Pour générer un menu de navigation Bootstrap avec [Sage 8](https://github.com/roots/sage/tree/8.6.0/), vous aurez besoin de passer par un [Navwalker](https://developer.wordpress.org/reference/classes/walker_nav_menu/) pour obtenir le rendu HTML attendu.

Pour ce faire, vous devez télécharger le fichier [class-wp-bootstrap-navwalker.php](https://github.com/wp-bootstrap/wp-bootstrap-navwalker) puis le déposer dans le répertoire **/lib** de votre thème.

Ensuite, il suffit de loader le fichier à partir de **functions.php** :

```
$sage_includes = [
  'lib/cpt.php',       // CPT
  'lib/assets.php',    // Scripts and stylesheets
  'lib/extras.php',    // Custom functions
  'lib/setup.php',     // Theme setup
  'lib/titles.php',    // Page titles
  'lib/wrapper.php',   // Theme wrapper class
  'lib/customizer.php', // Theme customizer
  'lib/class-wp-bootstrap-navwalker.php'
];
```

Modifier le fichier **templates/header.php** pour appeler le nouveau walker :

```
<header class="banner">
  <nav class="navbar navbar-expand-lg navbar-dark navbar-uwinpronos fixed-top">
    <a class="brand navbar-brand" href="<?= esc_url(home_url('/')); ?>" alt="<?php bloginfo('name'); ?>">BRAND NAME</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarMenu">
      <?php
        if (has_nav_menu('primary_navigation')) :
          wp_nav_menu([
          'theme_location'  => 'primary_navigation', 
          'walker'          => new WP_Bootstrap_Navwalker(), 
          'menu_class'      => 'nav navbar-nav ml-auto',
          ]);
        endif;
      ?>
    </div>
  </nav>
</header>
```

Un projet IA en tête ?

On vous conseille gratuitement, sans filtre ni blabla.

[Parlons-en→](https://www.partikuls.com/fr/ressources/sage-8-navigation-bootstrap/#contact)

## À lire ensuite

[WordPress Agents IA dans WordPress : Abilities API et MCP transforment votre site en plateforme intelligente](https://www.partikuls.com/fr/ressources/wordpress-agents-ia-abilities-api-mcp/)[WordPress WordPress Abilities API : le guide complet pour développeurs](https://www.partikuls.com/fr/ressources/wordpress-abilities-api/)[WordPress wp-playground : la compétence IA qui révolutionne le test de plugins et thèmes](https://www.partikuls.com/fr/ressources/wp-playground-skill-ia/)

## Parlez-nous de votre projet.

C’est gratuit et sans engagement. Nous vous conseillons sans filtre ni bullshit.  
On vous répond en 8 h !

[Contactez-nous](https://www.partikuls.com/fr/ressources/sage-8-navigation-bootstrap/#contact-form)