The top navigation menu supports modes. For example, a common use case is to have a separate
search mode, which overrides the look of the top navigation bar. This page documents the usage of modes
in HyperNav. Usage of modes result in relatively complex HTML, especially as
input of type
must be used.
Note: the usage of modes is not completely keyboard accessible without JS.
The state control for modes is a bit different than for the standard HyperNav hamburger menu.
This follows from the fact that only one mode should be active at a time, which is why input
elements of type
radio are used instead of
checkbox. This has some extra implications,
which must be taken care of.
One Mode Example
A HyperNav top navigation menu with one extra mode.
Two Modes Example
A HyperNav top navigation menu with two extra modes.