ThemeKit Navigation

Hero Navigation

Navigation

The ThemeKit Nav Hero widget combines a hero image and a vertical nav menu. It is used here below a header created using the ThemeKit Basic Header widget which can overlay the hero at the top if required.
On browser/device screen widths wider than the breakpoint the navigation can be aligned left, center or right. Below the break the menu becomes centered.
The image is inserted in three sizes and has a lazy loading option.
The main features are …

  • Optional heading with optional chevron down icon
  • Adjustable link spacing
  • Link background hover animation
  • Current page link background color control
  • Optional chevron right icon
  • Maximum height option to allow any overflow to scroll

Larger Websites

On large websites with directories this navigation can be used to link to the various ssectionsfrom the home page.

ThemeKit Nav Menu

Responsive Navigation

The ThemeKit Nav Menu widget has the best possible design and action for responsive website navigation.
Action Tab
The tab has a fixed position at the top left or right with controls foradjusting its position.
The text is editable and the navigation icon transforms to a close icon when activated. It has controls for font size, color, background color and opacity and border radius.
Navigation design essentials …

  • The navigation links should be vertical and appear front and center in an overlay for the best performance and ease of use
  • Links should have a spacing control to allow the required clear radius around an active item per Google's requirements
  • Use a background hover animation rather than a change of font color
  • Directories should be avoided as they cause confusion
  • Websites with up to about 50 pages should show the links to all of them
  • Larger websites should use a directory menu for navigating to sections of the site
  • A directory menu should ideally have images relevant to the content

Navigation Panel

The links are centered in the browser/device window and can be arranged in columns using the controls for link min width and nav max width.
They have a background hover animation and the current page link can be displayed with a different background color.