The main menu

Note

A fundamental navigational tool on websites is the ‘main menu.’ Main menu should reflect the website’s information architecture.

The Drupal Kit installs with a “Main navigation” menu displayed in the header, showing top-level (L1) items initially and second-level (L2) items on hover.

  • L1 items should typically be landing pages.

  • L2 items should be groups of related content.

Note

Any menu placed in the “Primary Menu” region will display only L1 and L2 items. L3 items or beyond will not display. To display L3 items or beyond in site navigation, consider Placing a menu within a page.

Contents

Things to know about the main menu

Configure the “Main navigation” at Structure > Menus (/admin/structure/menu/manage/main):

  • Rearrange menu items using the drag and-drop crosshairs. Drag vertically to set order, horizontally to control hierarchy. See Link behavior for L1 links.

  • Hide or show menu items by toggling the “Enabled” checkbox.

  • Menu items can link to internal pages within your site. For using the internal link autocomplete feature, see Link to a page within your site (internal)

  • Menu items link to external websites by putting the external URL in the Link field.

Editing menu link position (left) and result (right)

L1 and L2 menu links positioning

Responsive Behavior

On devices with smaller screen widths, the main menu, along with search bar and site title, is initially collapsed, expandable by activating the “hamburger” icon . Clicking on the right-side carets will expand the L1 items to show their children. L1 items without children will not show the right-side caret.

Picture of a mobile menu

The Main navigation menu shown on a smaller screen with a L1 link showing its L2 children