Title: Getting started – Divided Menus
Last modified: September 4, 2017

---

# Getting started – Divided Menus

 *  Plugin Author [Matt Keys](https://wordpress.org/support/users/mattkeys/)
 * (@mattkeys)
 * [8 years, 9 months ago](https://wordpress.org/support/topic/getting-started-divided-menus/)
 * _NOTE:_ This documentation is also included in the /documentation/ folder with
   your plugin download, and is easier to read in that format.
 * **DIVIDED MENUS**
 * A fairly common website design pattern you may see online calls for the header
   navigation menu to be placed left and right of a central object, like the site
   logo. WP Nav Plus makes it very easy to build out these “divided menus.”
 * Build a divided menu with WP Nav Plus using one of the two following methods:
 * _Easy Method (Widget)_
 * The easiest way to get up and running quickly with WP Nav Plus is to make use
   of the widget. In this section I will show you how to implement a basic divided
   menu using the WP Nav Plus widget.
    1. Login to your WordPress Admin page (usually [http://yourdomain.com/wp-admin](http://yourdomain.com/wp-admin))
    2. Navigate to the Widgets screen (Under “Appearance”)
    3. Notice the new widget called “WP Nav Plus” (pictured below)
        ⌊WP Nav Plus Inactive
       Widget⌉
    4. Click and drag this widget into the desired sidebar placement (pictured below).
       NOTE: My sidebar is called “Primary Sidebar”, your sidebar may be named differently.
       Please see your theme documentation for additional details about your sidebars.
       ⌊
       WP Nav Plus Divided Menu⌉
    5. Add your divider html into the provided textarea.
    6. Congratulations, your widget has been successfully installed! Configure the 
       Divider HTML, and Divider Offset as needed to reach your desired output.
 * _Advanced Method (Function)_
 * The documentation above has focused on using the WP Nav Plus widget as the easiest
   way to get started with WP Nav Plus. However for advanced users who want more
   control over the output of their menu, WP Nav Plus can be used with the built
   in WordPress [wp_nav_menu function](http://codex.wordpress.org/Function_Reference/wp_nav_menu)
 * WP Nav Plus adds five arguments to the wp_nav_menu function for use with divided
   menus.
    - _option: _**divider_html**
    - _type: _string
    - _default: _false
    - _desctiption: _Enter any HTML here that you wish to be injected into your 
      menu. WP Nav Plus will wrap your entered html with a container and place it
      into the middle of your menu output.
 *  - _option: _**divider_offset**
    - _type: _int
    - _default: _0
    - _desctiption: _The Divider HTML will automatically try to place itself into
      the middle of your menu output, however this can be tweaked using the divider_offset.
      Pass a positive number to move your Divider HTML down the DOM structure. Pass
      a negative number to move your Divider HTML up the DOM structure.
 *  - _option: _**divider_class**
    - _type: _string
    - _default: _menu-divider-item
    - _desctiption: _Override the Divider HTML element default class with any class
      name of your choice.
 *  - _option: _**divider_id**
    - _type: _string
    - _default: _false
    - _desctiption: _Add an ID to your Divider HTML element.
 *  - _option: _**divider_container**
    - _type: _string
    - _default: _li
    - _desctiption: _Override the Divider container type with any valid HTML element
      of your choice.
 * _Basic Example:_
 *     ```
       $divider_html = '<a href="/"><img src="/path/to/my/logo.png" /></a>';
   
       wp_nav_menu(
       	array(
       		'theme_location' => 'my_menu',
       		'divider_html' => $divider_html
       	)
       );
       ```
   
 * The above example would create a menu with the $divider_html specified above 
   in the middle of the markup. Use divider_offset to tweak the position of the 
   $divider_html.

The topic ‘Getting started – Divided Menus’ is closed to new replies.

 * ![](https://ps.w.org/wp-nav-plus/assets/icon-256x256.jpg?rev=1724550)
 * [WP Nav Plus](https://wordpress.org/plugins/wp-nav-plus/)
 * [Support Threads](https://wordpress.org/support/plugin/wp-nav-plus/)
 * [Active Topics](https://wordpress.org/support/plugin/wp-nav-plus/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wp-nav-plus/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wp-nav-plus/reviews/)

 * 0 replies
 * 1 participant
 * Last reply from: [Matt Keys](https://wordpress.org/support/users/mattkeys/)
 * Last activity: [8 years, 9 months ago](https://wordpress.org/support/topic/getting-started-divided-menus/)
 * Status: not a support question