How to Make Navigation Menus Dynamic

Create user-editable navigation menus that can be managed from the Layout dashboard.

Hard-coding menu links in your theme is inflexible. The best practice is to use widgets that allow the blog owner to easily add, remove, and reorder links themselves without touching any code.

The Right Tools: `Pages` and `LinkList` Widgets

  • Pages Widget: Automatically generates a menu from your blog's static pages. It's simple and perfect for basic navigation (e.g., Home, About, Contact).
  • LinkList Widget: The most flexible option. It allows the user to create a list of any links they want—links to labels, specific posts, external websites, etc. This is the preferred method for primary navigation menus.

Implementation

In your theme's HTML, create a dedicated `<b:section>` in your header or footer for the menu. Give it a descriptive ID like `nav-menu-section`. Then, from the Layout dashboard, the user can add a `LinkList` or `Pages` widget to that section.

Code Examples

xmlHeader Section for a Dynamic Menu
1
2
3
4
5
6
7
8
9
<header>
  <div class='logo'>...</div>
  <nav class='main-nav'>
    <!-- User will add a LinkList widget here from the dashboard -->
    <b:section id='nav-menu-section' maxwidgets='1' showaddelement='yes'>
      <b:widget id='LinkList1' type='LinkList' title='Main Menu' locked='false'/>
    </b:section>
  </nav>
</header>

Pro Tip

You can use CSS to style the `LinkList` widget to look like a professional navigation bar, including dropdown menus with some clever CSS and/or JavaScript.

Was this lesson helpful?

Have feedback, found an issue, or have a suggestion? Let us know!

Send Feedback