Menu

Menu is a handy component, by default dropdown and navigation bar use this component and style it based on their usage.
Generally there is a .menu-items-wrapper parent element with .menu-item children.

Active & disabled states

With .active and .disabled classes you can show active item of the list and disable a link.

Vertical

index.html

<ul class="menu-items-wrapper">
  <li class="menu-item active"><a>Home</a></li>
  <li class="menu-item"><a>Articles</a></li>
  <li class="menu-item"><a>Photos</a></li>
  <li class="menu-item"><a>Videos</a></li>
  <li class="menu-item disabled"><a>About Us</a></li>
</ul>

Horizontal

By adding the .flex-center menu will be horizontal.

index.html

<ul class="menu-items-wrapper flex-center">
  <li class="menu-item active"><a>Home</a></li>
  <li class="menu-item"><a>Articles</a></li>
  <li class="menu-item"><a>Photos</a></li>
  <li class="menu-item"><a>Videos</a></li>
  <li class="menu-item disabled"><a>About Us</a></li>
</ul>

Submenu

Submenu is the second level of menu. Generally it has show/hide functionality but inside navigation bar component.

Submenu arrow

Submenu can have arrow, you can use .arrow-top, .arrow-bottom, .arrow-left, .arrow-right classes for different directions.

index.html

<div class="menu-items-wrapper">
  <ul class="submenu arrow-top">
    <li class="menu-item active"><a>Home</a></li>
    <li class="menu-item"><a>Articles</a></li>
    <li class="menu-item"><a>Photos</a></li>
    <li class="menu-item"><a>Videos</a></li>
    <li class="menu-item disabled"><a>About Us</a></li>
  </ul>
</div>

Customization

Menu, menu items and submenu have their own CSS variables to be customized, you see all possible options below.

Menu items wrapper:
--flatify__menu-bg-color
--flatify__menu-txt-color
--flatify__menu-border-color

Menu items:
--flatify__menu-active-item-bg-color
--flatify__menu-active-item-txt-color
--flatify__menu-item-bg-color
--flatify__menu-item-bg-color__hover
--flatify__menu-item-bg-color__focus
--flatify__menu-item-txt-color
--flatify__menu-item-txt-color__hover
--flatify__menu-item-txt-color__focus

Submenu:
--flatify__submenu-bg-color
--flatify__submenu-txt-color
--flatify__submenu-border-color

Submenu items:
--flatify__submenu-item-bg-color
--flatify__submenu-item-bg-color__hover
--flatify__submenu-item-bg-color__focus
--flatify__submenu-item-txt-color
--flatify__submenu-item-txt-color__hover
--flatify__submenu-item-txt-color__focus

Submenu animation (when they are inside navigation bar):
Change current animation:
--flatify__submenu-animation-show-duration
--flatify__submenu-animation-show-delay
Or set a new animation:
--flatify__submenu-animation-show