Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • Only one item at a time can be selected from each level.

  • 2nd level navigation should only be shown where relevant. Otherwise, the area beneath the line will remain empty.

  • Where there are 2 levels of navigation, only 2nd level items will load pages within the application. 1st level items only allow access to 2nd level items.

  • Menu items should be shown in a logical order, with the most commonly used first.

  • Menu item widths may be greater where there are fewer than 7 items in a level. The width of each item should be responsive to the item label, with the following limits:

    • 1st level item labels: up to 30 characters (across 2 lines).

    • 2nd level item labels: up to 16 characters (1 line only).

  • Truncation should be avoided, where possible, by using short labels.

  • No horizontal scroll can be used within top navigation.

...

  • The header bar should expand/collapse with a transition effect.

Best Practices

General

  • Truncation should be avoided, where possible, by using short labels.

  • Number of items for both 1st and 2nd levels should not exceed 8 items.

Accessibility Compliance

...