Building navigation menus

Navigation is a key component of all but the simplest websites. So far, we haven't given it much attention, apart from a few horizontal links in our example page. In AMP, there are a few options for building navigation menus.

Horizontal navigation menus

Our example currently has only a few navigation items, but as we add more we can see a problem with the design: we'll quickly run out of horizontal space. We could just let the links wrap down to the next line, but maybe we can do better. Let's look at a few quick fixes we can apply to improve the situation.

Scrollable horizontal navigation

We can make a very simple improvement simply by applying CSS whitespace: nowrap, and overflow-x: scroll styles to our horizontal navigation bar. This will allow the menu items to extend beyond the edge of the page. The HTML for our links will look like this (/ch4/nav-div.html):

<div class="primary-nav">
  <ul>
    <li><a href="#">news</a></li>
 ...