Navigation

Menu

The horizontal menu is used as a primary navigation and it can display up to 2 levels. It directs users to the pages where they need to visit.

See "playground" for examples.

Do's

  • keep first level items (parent pages) labels short, distinct and use maximum 16 characters including spaces, otherwise they will be hidden under a hamburger menu (☰) (for ENG labels, keep in mind a 20% buffer for other languages)
  • keep second level items (child pages) labels short, distinct and use maximum 32 characters (for ENG labels, keep in mind a 20% buffer for other languages)

Don'ts

  • do not use for anything else except the website's main navigation

When to use

  • use for primary navigation

When not to use

  • when you only have a one-page or a content shallow web site