Morphing Navigation

Header template with a morphing dropdown.

Dependencies

• Collapse
• Animated Menu Button

How to

The Morphing Navigation is a customizable main navigation template featuring morphing dropdowns (visible if the screen > 1024px).

The HTML structure is divided in two parts: the first one visible on mobile (screen < 1024px), the second on bigger screens. Make sure to modify both parts when including your custom content.

For example, in the 'no-framework' version we have:

<header class="morph-nav js-morph-nav">
  <!-- mobile -->
  <div class="morph-nav__sm"><!-- ... --></div>

  <!-- desktop -->
  <div class="morph-nav__lg"><!-- ... --></div>
</header>

On mobile, we use the collapse component to hide one subnavigation and show it on click.

Categories

• Navigation > Header

Bug report & feedback

Component Github page ↗