Menu View Design Settings

A new ‘Menus’ section within your Live App Design settings will allow you to globally customize the style of menu links used throughout your live app’s menu views.

Menu Link Style Markup And Classes

The markup and CSS classes for menu links will remain the same when using the ‘Legacy’ menu link style, which will be set as the default for all apps. However, the new menu links styles will have new and improved markup and new classes.

When using one of the new menu links styles, the markup for the navigation menu will follow a more semantic structure with well-defined classes. This helps provide assistive technologies with better information about the structure of the menu.

<div class="menu-links">
  <nav class="menu-links__nav">
    <ul class="menu-links__list">
      <li class="menu-links__list-item">
        <a href="#" class="knMenuLink">Link 1</a>
      </li>
      <li class="menu-links__list-item">
        <a href="#" class="knMenuLink">Link 2</a>
      </li>
      <li class="menu-links__list-item">
        <a href="#" class="knMenuLink">Link 3</a>
      </li>
    </ul>
  </nav>
</div>

The new menu links will have the class .knMenuLink, as well as other modifier classes which will vary based on specific style options selected. These modifier classes are:

.knMenuLink--tab
.knMenuLink--outlined
.knMenuLink--underlined
.knMenuLink--filled
.knMenuLink--raised
.knMenuLink--size-small
.knMenuLink--size-medium
.knMenuLink--size-large
.knMenuLink--uppercase
.knMenuLink--rounded
.knMenuLink--border-thick

If using an icon inside a menu link, the icon wrapper element will have the class .knMenuLink__icon along with a respective class modifier depending on the icon’s position: .knMenuLink__icon--isLeft or .knMenuLink__icon--isRight.

Release Notes

Read more about the feature in our knowledge base, and join the conversation in our community forum.