PHPackages                             wp-bootstrap/wp-bootstrap-navwalker - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. wp-bootstrap/wp-bootstrap-navwalker

ActiveLibrary[Templating & Views](/categories/templating)

wp-bootstrap/wp-bootstrap-navwalker
===================================

A custom WordPress nav walker class to fully implement the Bootstrap 4 navigation style in a custom theme using the WordPress built in menu manager.

v4.3.0(6y ago)3.3k44.3k↑40%1.9k[31 issues](https://github.com/wp-bootstrap/wp-bootstrap-navwalker/issues)[4 PRs](https://github.com/wp-bootstrap/wp-bootstrap-navwalker/pulls)GPL-3.0+PHP

Since Mar 14Pushed 3y ago208 watchersCompare

[ Source](https://github.com/wp-bootstrap/wp-bootstrap-navwalker)[ Packagist](https://packagist.org/packages/wp-bootstrap/wp-bootstrap-navwalker)[ RSS](/packages/wp-bootstrap-wp-bootstrap-navwalker/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (6)Dependencies (2)Versions (18)Used By (0)

WP Bootstrap Navwalker
======================

[](#wp-bootstrap-navwalker)

[![Code Climate](https://camo.githubusercontent.com/4b966f535534f5523032abe209929bd4b1fb1e0c626191210d807f35b84deafd/68747470733a2f2f636f6465636c696d6174652e636f6d2f6769746875622f77702d626f6f7473747261702f77702d626f6f7473747261702d6e617677616c6b65722f6261646765732f6770612e737667)](https://codeclimate.com/github/wp-bootstrap/wp-bootstrap-navwalker)[![Test Coverage](https://camo.githubusercontent.com/d28896c46d77c2b3c7365f233f97bd85c951a3247416ed676e8a5cc698090f1a/68747470733a2f2f636f6465636c696d6174652e636f6d2f6769746875622f77702d626f6f7473747261702f77702d626f6f7473747261702d6e617677616c6b65722f6261646765732f636f7665726167652e737667)](https://codeclimate.com/github/wp-bootstrap/wp-bootstrap-navwalker/coverage)[![Issue Count](https://camo.githubusercontent.com/044b59a986923612f01c8e8ce4cd4a08edc1b02e73559daff95aefa5eadd998c/68747470733a2f2f636f6465636c696d6174652e636f6d2f6769746875622f77702d626f6f7473747261702f77702d626f6f7473747261702d6e617677616c6b65722f6261646765732f69737375655f636f756e742e737667)](https://codeclimate.com/github/wp-bootstrap/wp-bootstrap-navwalker)[![Build Status](https://camo.githubusercontent.com/c613afb45da58dcdae88994d79cfb746c92cde56204b98cf730d25fdaa15b372/68747470733a2f2f7472617669732d63692e6f72672f77702d626f6f7473747261702f77702d626f6f7473747261702d6e617677616c6b65722e7376673f6272616e63683d6d6173746572)](https://travis-ci.org/wp-bootstrap/wp-bootstrap-navwalker)[![Scrutinizer Code Quality](https://camo.githubusercontent.com/c87be6997cc5ec38a5380009be5849fe7dfde095090e4f0966554517c2c2df98/68747470733a2f2f7363727574696e697a65722d63692e636f6d2f672f77702d626f6f7473747261702f77702d626f6f7473747261702d6e617677616c6b65722f6261646765732f7175616c6974792d73636f72652e706e673f623d6d6173746572)](https://scrutinizer-ci.com/g/wp-bootstrap/wp-bootstrap-navwalker/?branch=master)[![Code Coverage](https://camo.githubusercontent.com/f5a72cb8131535f806f0c792431e1dac55fde1d8f6ce9e801a97d24cc9110b67/68747470733a2f2f7363727574696e697a65722d63692e636f6d2f672f77702d626f6f7473747261702f77702d626f6f7473747261702d6e617677616c6b65722f6261646765732f636f7665726167652e706e673f623d6d6173746572)](https://scrutinizer-ci.com/g/wp-bootstrap/wp-bootstrap-navwalker/?branch=master)[![Build Status](https://camo.githubusercontent.com/9878306e4ba503c7523f6090f16b07bb81c5e81227ac7c5850d8aeaccdf7d135/68747470733a2f2f7363727574696e697a65722d63692e636f6d2f672f77702d626f6f7473747261702f77702d626f6f7473747261702d6e617677616c6b65722f6261646765732f6275696c642e706e673f623d6d6173746572)](https://scrutinizer-ci.com/g/wp-bootstrap/wp-bootstrap-navwalker/build-status/master)

**This code in the main repo branch is undergoing a big shakeup to bring it in line with recent standards and to merge and test the backlog of PRs I have left for too long. Please use the v4.3.0 tag for stable version while this process happens. **

A custom WordPress Nav Walker Class to fully implement the Bootstrap 4 navigation style in a custom theme using the WordPress built in menu manager.

NOTES
-----

[](#notes)

This is a utility class that is intended to format your WordPress theme menu with the correct syntax and CSS classes to utilize the Bootstrap dropdown navigation. It does not include the required Bootstrap JS and CSS files - you will have to include them manually.

### WordPress.org Theme Compliance

[](#wordpressorg-theme-compliance)

*This walker is fully compliant with all Theme Review guidelines for wordpress.org theme submission.* It requires no modification to be compliant but you can optionally replace the `wp-bootstrap-navwalker` text domain (which appears twice in the `fallback` function) with the text domain of your theme.

### Upgrade Notes

[](#upgrade-notes)

Between version 3 and version 4 of the walker there have been significant changes to the codebase. Version 4 of the walker is built to work with Bootstrap 4 and has not been tested for backwards compatibility with Bootstrap 3. A separate branch for Bootstrap 3 is maintained here:

Here is a list of the most notable changes:

- The filename has been changed and prefixed with `class-` to better fit PHP coding standards naming conventions.
    - New Name: `class-wp-bootstrap-navwalker.php`
    - Old Name: `wp-bootstrap-navwalker.php`
- Icon and link modifier handling is now done through the `CSS Classes` menu item input instead of the `Title` input.
- Icon only items are possible using icon classes in combination with the `sr-only` classname.

Installation
------------

[](#installation)

Place **class-wp-bootstrap-navwalker.php** in your WordPress theme folder `/wp-content/themes/your-theme/`

Open your WordPress themes **functions.php** file - `/wp-content/themes/your-theme/functions.php` - and add the following code:

```
/**
 * Register Custom Navigation Walker
 */
function register_navwalker(){
	require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}
add_action( 'after_setup_theme', 'register_navwalker' );
```

If you encounter errors with the above code use a check like this to return clean errors to help diagnose the problem.

```
if ( ! file_exists( get_template_directory() . '/class-wp-bootstrap-navwalker.php' ) ) {
    // File does not exist... return an error.
    return new WP_Error( 'class-wp-bootstrap-navwalker-missing', __( 'It appears the class-wp-bootstrap-navwalker.php file may be missing.', 'wp-bootstrap-navwalker' ) );
} else {
    // File exists... require it.
    require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}
```

You will also need to declare a new menu in your `functions.php` file if one doesn't already exist.

```
register_nav_menus( array(
    'primary' => __( 'Primary Menu', 'THEMENAME' ),
) );
```

Usage
-----

[](#usage)

Add or update any `wp_nav_menu()` functions in your theme (often found in `header.php`) to use the new walker by adding a `'walker'` item to the wp\_nav\_menu args array.

```
wp_nav_menu( array(
    'theme_location'  => 'primary',
    'depth'           => 2, // 1 = no dropdowns, 2 = with dropdowns.
    'container'       => 'div',
    'container_class' => 'collapse navbar-collapse',
    'container_id'    => 'bs-example-navbar-collapse-1',
    'menu_class'      => 'navbar-nav mr-auto',
    'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
    'walker'          => new WP_Bootstrap_Navwalker(),
) );
```

Your menu will now be formatted with the correct syntax and classes to implement Bootstrap dropdown navigation.

Typically the menu is wrapped with additional markup, here is an example of a `fixed-top` menu that collapse for responsive navigation at the md breakpoint.

```