The navigation bar always has a height of 70px and standard inner and outer margins, except for the top (or bottom, in the case of a menu pinned to the bottom of the screen).
The navigation always has a solid background from a color palette with 100% saturation, 80% opacity, and a blur effect.
The background of drop-down menus should be transparent, also with a blur effect.
The navigation has a 1px border with a color corresponding to the style (light/dark).
Text should be in a contrasting color (preferably white or black).
Active elements have an underline.
To achieve appropriate styling of active elements using CSS, you can use a special CSS class that defines whether the header is "light" or "dark."
Suitable classes are .imd-nav-light and .imd-nav-dark.
The menu is always pinned to the top of the screen.
It's possible to enforce a mobile navigation style (hamburger menu) on higher resolutions.
This is achieved using the following classes: .imd-nav-mobile-xl, .imd-nav-mobile-lg, and .imd-nav-mobile-md.
To move navigation bar on the bottom of page you can add imd-nav-bottom class to <nav> element.
This navigation bar cannot have any submenus - this option is disabled.
The IcyMat Design system also includes the creation of navigation icons.
A navigation icon contains only a pictogram from a predefined character set and is square in shape.
The pictogram should be centered both vertically and horizontally.
The navigation icon's size is 33% of the floating icon's size, and the entire icon has margins equal to the margins of the floating element.
To create a navigation icon with only an outline, add the .imd-nav-icon-outline class and set the border and icon color to the same.