{"id":19559870,"url":"https://github.com/wp-bootstrap/wp-bootstrap-navlist-walker","last_synced_at":"2026-03-15T17:36:12.544Z","repository":{"id":10764353,"uuid":"66888885","full_name":"wp-bootstrap/wp-bootstrap-navlist-walker","owner":"wp-bootstrap","description":"A custom WordPress nav walker class to implement the Bootstrap 3 navigation style in a custom theme using the WordPress built in menu manager.","archived":false,"fork":false,"pushed_at":"2023-03-16T18:16:46.000Z","size":44,"stargazers_count":8,"open_issues_count":1,"forks_count":11,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-04T18:23:50.913Z","etag":null,"topics":["bootstrap","bootstrap-navigation","custom-navwalker","custom-walker","nav","navigation","navlist","navwalker","twitter-bootstrap","walker","wordpress","wp-bootstrap"],"latest_commit_sha":null,"homepage":"https://wp-bootstrap.github.io/wp-bootstrap-navlist-walker/","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wp-bootstrap.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-29T23:41:12.000Z","updated_at":"2023-12-20T02:27:33.000Z","dependencies_parsed_at":"2022-08-07T06:00:30.376Z","dependency_job_id":null,"html_url":"https://github.com/wp-bootstrap/wp-bootstrap-navlist-walker","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wp-bootstrap%2Fwp-bootstrap-navlist-walker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wp-bootstrap%2Fwp-bootstrap-navlist-walker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wp-bootstrap%2Fwp-bootstrap-navlist-walker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wp-bootstrap%2Fwp-bootstrap-navlist-walker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wp-bootstrap","download_url":"https://codeload.github.com/wp-bootstrap/wp-bootstrap-navlist-walker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251068040,"owners_count":21531475,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","bootstrap-navigation","custom-navwalker","custom-walker","nav","navigation","navlist","navwalker","twitter-bootstrap","walker","wordpress","wp-bootstrap"],"created_at":"2024-11-11T05:04:40.193Z","updated_at":"2026-03-15T17:36:12.486Z","avatar_url":"https://github.com/wp-bootstrap.png","language":"PHP","readme":"# wp-bootstrap-navlist-walker\n\n[![Code Climate](https://codeclimate.com/github/wp-bootstrap/wp-bootstrap-navlist-walker/badges/gpa.svg)](https://codeclimate.com/github/wp-bootstrap/wp-bootstrap-navlist-walker)\n[![Test Coverage](https://codeclimate.com/github/wp-bootstrap/wp-bootstrap-navlist-walker/badges/coverage.svg)](https://codeclimate.com/github/wp-bootstrap/wp-bootstrap-navlist-walker/coverage)\n[![Issue Count](https://codeclimate.com/github/wp-bootstrap/wp-bootstrap-navlist-walker/badges/issue_count.svg)](https://codeclimate.com/github/wp-bootstrap/wp-bootstrap-navlist-walker)\n\n**Custom list navigation for WordPress themes utilizing the Bootstrap framework. The package includes a custom walker class \u0026 Less file with mixins.**\n\n\n**Walker Class Features**\n+ Structures menu HTML in a Bootstrap format\n+ Standard WordPress classes removed\n+ Child items are only rendered when parent is active\n+ Structured to support  Bootstrap Affix \u0026 Scroll Spy\n\n**LESS Features**\n+ Custom list menu style\n+ Support for light and dark menus\n+ 12 Included color schemes\n+ Mixin to quickly create custom color schemes\n\n** This is a utility class that is intended to format your WordPress theme menu with the correct syntax and classes to utilize the Bootstrap navigation, and does not include the required Bootstrap JS files. You will have to include them manually. **\n\n## Installation\n\nPlace **wp_bootstrap_navlist_walker.php** in your WordPress theme folder `/wp-content/your-theme/`\n\nOpen your WordPress themes **functions.php** file  `/wp-content/your-theme/functions.php` and add the following code:\n\n```php\n// Register Custom Navigation Walker\nrequire_once('wp_bootstrap_navlist_walker.php');\n```\n\n## Usage\n\nUpdate your `wp_nav_menu()` function in `header.php` to use the new walker by adding a \"walker\" item to the wp_nav_menu array.\n\n```php\n\u003c?php\n\twp_nav_menu( array(\n\t\t'menu'              =\u003e 'primary',\n\t\t'theme_location'    =\u003e 'primary',\n\t\t'depth'             =\u003e 2,\n\t\t'container'         =\u003e 'false',\n\t\t'menu_class'        =\u003e 'nav nav-list',\n\t\t'fallback_cb'       =\u003e 'wp_bootstrap_navlist_walker::fallback',\n\t\t'walker'\t\t\t=\u003e new wp_bootstrap_navlist_walker())\n\t);\n?\u003e\n```\n\nYour menu will now be formatted with the correct syntax and classes to implement Bootstrap dropdown navigation. \n\nYou will also want to declare your new menu in your `functions.php` file.\n\n```php\nregister_nav_menus( array(\n\t'primary' =\u003e __( 'Primary Menu', 'THEMENAME' ),\n) );\n```\n\n## Displaying the Menu \n\nTo display the menu you must associate your menu with your theme location. You can do this by selecting your theme location in the *Theme Locations* list wile editing a menu in the WordPress menu manager.\n\n## Glyphicons\n\nTo add an Icon to your link simple place the Glyphicon class name in the links **Title Attribute** field and the class will do the rest. IE `glyphicon-bullhorn`\n\n\n## Disabled Links\n\nTo set a disabled link simply set the **Title Attribute** to `disabled` and the class will do the rest. \n\n\n## LESS Style\n\nThe included nav-list.less comes with 12 menus styles, and a bunch of handy custom LESS mixins to make generating your own styles quick and easy. \n\n### Included Styles\n\nTo switch out styles simply add the desired css classes to you `wp_nav_menu` declarations `menu_class` variable.\n\n`'menu_class' =\u003e 'nav nav-list-inverse nav-list-info'`\n\n**.nav-list**    \n\n\n**.nav-list-primary**    \n\n\n**.nav-list-success**    \n\n\n**.nav-list-warning**    \n\n\n**.nav-list-info**    \n\n\n**.nav-list-danger**    \n\n\n**.nav-list-inverse**    \n\n\n**.nav-list-inverse .nav-list-primary**    \n\n\n**.nav-list-inverse .nav-list-success**    \n\n**.nav-list-inverse .nav-list-warning**    \n\n**.nav-list-inverse .nav-list-info**    \n\n**.nav-list-inverse .nav-list-danger**    \n\n### Custom Styles\n\nThe included LESS file includes some powerful mixins that make creating a custom style incredibly simple. At it's simplest you can create a custom style by using the `.generate-nav-list` mixin and passing a single color.\n\n```css\n.nav-list-peach {\n\t.generate-nav-list( #ffbf6d );\n}\n```\nWhen you call the `.generate-nav-list()` mixin it compares your @primary \u0026 @secondary colors luminance values, then based on the luminance difference generates text, border, and highlight colors.\n\nHere is a rundown of all of the `.generate-nav-list()` variables. \n\n`.generate-nav-list (@primary, @secondary, @border-width, @border-radius);`\n\n**@primary** - *Required* - Your menus foreground color for highlighted menu items. On a light colored menu this color is also use to generate accent colors. \n\n**@secondary** - *Default: #fff;* - Your menus background color. On a dark colored menu this color is also use to generate accent colors.\n\n**@border-width** - *Default: 1px;* - The border width around the menu in pixels.\n\n**@border-radius** - *Default: @border-radius-base* - The menus border radius in pixels.\n\n\n## Affix \u0026 Scrollspy\n\nwp-bootstrap-navlist-walker is setup to support Bootstrap's Affix \u0026 Scrollspy javascript. \n\nIf you have the Bootstrap Affix javascript loaded you can affix the menu by wrapping it in a `\u003cdiv\u003e` in including the appropriate data attributes. Visit http://getbootstrap.com/javascript/#affix for more info.\n\n```php\n\u003cdiv data-spy=\"affix\" data-offset-top=\"200\"\u003e\n\t\u003c?php\n\t\twp_nav_menu( array(\n\t\t\t'menu'              =\u003e 'primary',\n\t\t\t'theme_location'    =\u003e 'primary',\n\t\t\t'depth'             =\u003e 2,\n\t\t\t'container'         =\u003e 'false',\n\t\t\t'menu_class'        =\u003e 'nav nav-list-inverse nav-list-info',\n\t\t\t'fallback_cb'       =\u003e 'wp_bootstrap_sidenav_walker::fallback',\n\t\t\t'walker'\t\t\t=\u003e new wp_bootstrap_sidenav_walker())\n\t\t);\n\t?\u003e\n\u003c/div\u003e\n```\n\nIf you have the Bootstrap Scrollspy javascript loaded you can Scrollspy the sub menu items by following the steps at http://getbootstrap.com/javascript/#scrollspy and spying the `#nav-sublist` ID.\n\n## Changelog\n\n**1.0**\n+ Initial Class\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwp-bootstrap%2Fwp-bootstrap-navlist-walker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwp-bootstrap%2Fwp-bootstrap-navlist-walker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwp-bootstrap%2Fwp-bootstrap-navlist-walker/lists"}