{"id":6716,"date":"2024-04-14T15:59:56","date_gmt":"2024-04-14T07:59:56","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6716"},"modified":"2024-04-14T15:59:56","modified_gmt":"2024-04-14T07:59:56","slug":"navigation-menu-toggle","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/navigation-menu-toggle\/","title":{"rendered":"Navigation menu toggle"},"content":{"rendered":"\n
\n

The toggle button is a component within the Navigation menu that arranges the navigation links when there’s limited horizontal space, such as on a mobile device. It’s commonly known as the “burger menu.”<\/p>\n

The toggle button and its functionality are integrated into the Navigation bar element and can be accessed and customized in various ways. We’ll discuss four aspects of the toggle button:<\/p>\n

    \n
  1. Initiating the menu<\/li>\n
  2. Device visibility<\/li>\n
  3. Menu transitions<\/li>\n
  4. Customizing the toggle button<\/li>\n<\/ol>\n

    Initiating the menu<\/h2>\n

    By default, the navigation menu toggle appears on tablet breakpoint and below. You can enter preview mode to observe the menu appearing in your navigation bar when you switch to these devices. Clicking the toggle button will expand the navigation menu, and clicking it again collapses the menu.<\/p>\n

    On the desktop breakpoint, you’ll notice that the navigation links are nested inside the navigation menu element. This menu is the same element shown when the toggle button is clicked\u2014it simply displays the navigation links in a vertical list.<\/p>\n

    Initiating the menu in the Designer<\/h3>\n

    You can access the navigation menu in the Designer using the following steps:<\/p>\n

      \n
    1. Select the Navigation bar<\/strong> or any element within it<\/li>\n
    2. Open Settings panel<\/strong> > Navigation Settings<\/strong>\u200d<\/li>\n
    3. Opt to Show<\/strong> the menu<\/li>\n<\/ol>\n
      \n
      \"In<\/div>\n<\/figure>\n

      Device visibility<\/h2>\n

      By default, the Navigation toggle button is visible in the tablet breakpoint, but this can be adjusted. The button can be made visible on all breakpoints or hidden entirely. Follow these steps to modify the visibility:<\/p>\n

        \n
      1. Select the Navigation bar<\/strong> or any element within it<\/li>\n
      2. Open Settings panel<\/strong> > Navigation Settings<\/strong><\/li>\n
      3. Utilize the device options slider to determine the initial appearance of the Toggle button<\/li>\n<\/ol>\n
        \n
        \"In<\/div>\n<\/figure>\n

        Menu transitions<\/h2>\n

        There are three types of entrance animations available for the menu:<\/p>\n

          \n
        1. Slide down<\/li>\n
        2. Slide from the right<\/li>\n
        3. Slide from the left<\/li>\n<\/ol>\n

          You can designate the entrance animation in the Settings panel.<\/p>\n

          Slide down<\/h3>\n

          This represents the default menu style. Upon clicking the toggle button, the navigation menu will slide down from the Navigation bar. By default, the navigation menu utilizes the full browser window width.<\/p>\n

          \n
          \"The<\/div>\n<\/figure>\n

          Slide from the right<\/h3>\n

          With this menu style, the navigation menu slides in from the right side of the screen upon toggling the button. Note that this style will use the entire height of the browser window.<\/p>\n

          \n
          \"The<\/div>\n<\/figure>\n

          Slide from the left<\/h3>\n

          This menu style mirrors “Slide from the right,” except the navigation menu slides in from the left side. It will also occupy the entire height of the browser window.<\/p>\n

          \n
          \"The<\/div>\n<\/figure>\n

          Menu smoothness and transition<\/h3>\n

          For all these menu styles, you can manage the ease curve used for animating the open and close transitions. Additionally, you can adjust the transition duration.<\/p>\n

          \n
          \"In<\/div>\n<\/figure>\n

          Customizing the toggle button<\/h2>\n

          You have the flexibility to style any component of the Navigation bar or the navigation menu. Since styles flow down from larger breakpoints, select the highest breakpoint where you’ve enabled the Navigation toggle button and then apply styles.<\/p>\n

          Customizing the button<\/h3>\n

          WhenIn the tablet layout, you have the option to choose the menu button and modify the button\u2019s background hue.<\/p>\n

            \n
          1. Pick the menu button<\/strong><\/li>\n
          2. Access the Style tab<\/strong> > Backgrounds<\/strong>\u200d<\/li>\n
          3. Tap the color swatch to unveil the color picker and select a shade<\/li>\n<\/ol>\n

            Personalizing the icon appearance<\/h3>\n

            You can additionally tweak the menu icon using typography configurations. The typography styles will be applied to the icon from its parent component, the menu button.<\/p>\n

            To edit the size of the menu icon:<\/p>\n

              \n
            1. Select the menu button<\/strong><\/li>\n
            2. Access the Style tab<\/strong> > Typography<\/strong>\u200d<\/li>\n
            3. Adjust the Size <\/strong>to resize the menu icon<\/li>\n<\/ol>\n

              You can also modify the color of the menu icon by adjusting the font hue.<\/p>\n

              To modify the color of the menu icon:<\/p>\n

                \n
              1. Select the menu button<\/strong><\/li>\n
              2. Access the Style tab<\/strong> > Typography<\/strong>\u200d<\/li>\n
              3. Tap the color swatch to uncover the color picker and select a shade<\/li>\n<\/ol>\n
                Remember:<\/strong> The button components are modifiable. The menu icon can be removed and substituted with a customized image or a text element.<\/h6>\n

                Customizing the open state appearance<\/h3>\n

                You can tailor the display of the menu button based on the menu state (Show or Hide). If you have the Show menu option enabled, and apply a styling adjustment to the menu button OR assign a class to it, an exclusive \u201cOpen\u201d class will be automatically appended in the selector field.<\/p>\n

                Just like how styling operates on the default state, you can implement background and typography styles on the menu button to alter the background hue and icon hue.<\/p>\n

                \n
                \"A<\/div>\n<\/figure>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use the navbar menu button to organize menu links on mobile devices.","protected":false},"author":2,"featured_media":6717,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[290],"tags":[],"class_list":{"0":"post-6716","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-elements","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6716","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=6716"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6716\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6717"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6716"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6716"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6716"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}