Navigation component

The main aspect of the navigation component involves using the menu feature in WordPress. The first step is creating a menu and then allowing that menu to be presented using the navigation component. Before diving into the navigation component settings, here is how to actually create a menu.

To create or manage a menu, visit the “appearance” page on the WordPress dashboard and navigate to “menus.” At the top of the page, is the option to select which menu to manage. To create a new menu click the “create a new menu” button.

The left column labeled “add menu items” is where to find and add pages, posts or customs urls to the menu. The right side column is where to manage the “menus’ structure” like the order of the menu items.

The last thing to note in the overview is the “Manage Locations” tab. Opening this is where to assign a primary and secondary navigation menu to the site. If there’s every confusion about which menu is being used as the primary navigation for the website, this is the place to check.

After clicking “create a new menu” the first step is to assign the menu a name. It’s always a good idea to keep these names very clear as to what the menu is all about.

Below are the menu settings. “Auto add pages” will automatically add new pages that are created at the top-level to this menu. Next is “display location” which would allow this menu to replace the current primary or secondary navigation menus with the new one. Once the initial settings are all set click “create menu.”

Adding menu items to the menu is done using the left side column. There are a few categories used to organize methods of adding items.

The first drop down is the “pages” drop down which brings up a list of pages already on the site. This makes it easy to select an existing page from the site and put it right into the menu. Once the page or pages have been chosen by clicking the check boxes, click the “add to menu” button. This will move the menu items to the side right column.

The “posts’ section is very similar to the “pages” drop down, showing all of the posts currently on the site. Selecting posts and clicking “add to menu” will add the post to the menu.

The custom links drop down allows any links to be added to the menu. Simply add in the URL, and then fill out the label field.

The “categories” allows a whole post categories to be added to the menu. The menu item, when clicked will show all the posts that were labeled with that specific category.

The right hand column is where to organize the menu. Clicking on an item will show more detailed information about the selection. The menu builder will automatically add a label for the item, but if a different label is desired, that can be changed here. There is also the option to remove the menu item using the “remove” button.

After a few items have been added to the menu they can be organized the menu in any combination. Simply click and drag items into the desired order. If an item is dragged below another item it will move to the right, sitting underneath the item. This has created a sub item and the sub item label it has now been given. Sub items sit beneath the main item in the menu.

Once all of the items in the menu have been added, and once the items are all arranged correctly, the final step is clicking the “save menu” button.

In the top right hand side of the screen is a drop down called “Screen Options.” Clicking this will drown down check boxes to view additional settings. Choosing “description” will add some additional options to your menu items. Revisiting a menu item after this box is checked will reveal additional customization options.

With the “description” box checked a new text box should have appeared called “description.” This is where a small description for the menu can be added.

An icon setting should also be available. This allows for the choice of an icon to appear in the menu. Clicking this dropdown will open up a library of icons to choose from. Simply select the desired icon and it’ll appear in the menu.

The title field is an optional field where the title or heading of the navigation can be added.

The background color selector is where to choose the background color of the navigation.