What is the best way to design my site's navigation?

Navigation is one of the most important considerations when designing your site. Our software builds out navigational menus dynamically as pages are added to the site. All you have to do is add the correct tokens to your templates and style them with CSS to match your vision. Please refer to our token reference guide for detailed information about the navigational tokens.

This article will explain a few best practices for you to consider as you plan the navigation for your site.

  • Design your navigation in a way that can be styled by CSS as unordered lists of links. Our system outputs the menu items dynamically as unordered lists. Therefore, you need to make sure you design your menus so that the look you desire can be achieved through CSS styling.  If you have questions about this, please contact us and we'll be happy to take a look at your design.
  • Choose a navigational menu configuration. There are two navigational configurations that are most common:
    • Option one: Root menu plus section menu plus breadcrumb. Using these three navigational tokens in combination provide a great way to separate out the navigational functionality but still provide ready access to all appropriate pages in your site.

      Example: One of our product websites, www.lightcms.com, is a good example of this type of navigational layout. Visit the site, or see a visual example on our token reference page.
    • Option two: Global menu. The second common option is to use a single global menu which will generate a nested list of all pages in your site.

      Example: This support site provides a good example of global menu navigation. Notice the single, vertical, expandable list of menu items on the left side of the site.

Common Questions

Back to top