Download Github
English

Hamburger menu

It is a component that contains the collapsed web page navigation, the navigation is shown by clicking on the hamburger menu icon.

Use

Copy the HTML snippet and keep in mind:

  1. The element with the class nkn-hamburger-menu is the parent container of the component.
  2. The element with the class nkn-icon-toggle is the container of the icon, this element must have the attribute data-nkn-role = “hamburger-toggle” to collapse or show the menu.
  3. The element with the class nkn-icon, styles the icon.
  4. The element with the class nkn-curtain creates the background of the component. If you want to edit the background color property of this element, check the Unkuna Theme section.
  5. The element with the class nkn-hamburger-content is the container for the icon that collapses the component and the navigation links.
  6. The element with the class nkn-hamburger-content can go to the right or left of the page depending on whether it is accompanied by the class nkn-right or nkn-left.
  7. The element with the class nkn-icon-close accompanied by the class nkn-close and the attribute data-nkn-role = “hamburger-toggle” have the function of collapsing the component.
  8. The element with the class nkn-nav contains the navigation links.
  9. The navigation link goes in the element with the class nkn-nav-item

Example

HTML Snippet