How to Edit Navigation Menu

The navigation menu is available in two versions, namely the default menu with additional dropdowns and an alternative menu without dropdowns, the default menu can only be edited via Edit HTML.

Go to Blogger HTML Editor,
find the HTML000 widget, click icon for quick search.

Standard menu

In the navigation widget you will find code similar to below:

<!--[ Standar menu ]-->
<li class='leftC'>
  <b:comment>Change attribute href= to add url</b:comment>
  <a aria-label='About' class='a flex op i20' href='#' itemprop='url'>
    <!--[ icon ]-->
    <b:include name='profile-2user-icon'/>
    
    <!--[ name ]-->
    <div class='n'>
      <span itemprop='name'>About</span>
    </div>
  </a>
</li>

Information:

Change the href='#' attribute with your destination link.
Replace the tagged word/sentence with your new title.
Add a new icon by replacing the code marked <b:include name='profile-2user-icon'/> with an SVG icon, see all collection

Dropdown menu

If necessary, such as for writing one or more categories, you can add one or more dropdown menus in the navigation, the code for dropdown is similar to the code below:

<!--[ Dropdown ]-->
<li class='leftC dr'>
  <b:comment><!--[ Add open='' attribute to keep the menu open ]--></b:comment>
  <b:tag name='details'>
    <b:tag class='a flex noWrap op i20' name='summary'>
      <!--[ icon ]-->
      <b:include name='folder-2-icon'/>
  
      <!--[ name ]-->
      <b:tag class='flexIn center grow' name='span'>
        <span>Sub menu</span>
        <b:include name='arrow-down-1-icon'/>
      </b:tag>
    </b:tag>
    
    <ul class='n'>
      <b:comment><!--[ Change attribute href='#' to add url ]--></b:comment>
      <li itemprop='name'>
        <a href='#' itemprop='url'>
          <span>Sub-menu 01</span>
        </a>
      </li>
      <li itemprop='name'>
        <a href='#' itemprop='url'>
          <span>Sub-menu 02</span>
        </a>
      </li>
    
      <li class='m' data-text='Mini heading' itemprop='name'>
        <a href='#' itemprop='url'>
          <span>Sub-menu 03</span>
        </a>
      </li>
      <li itemprop='name'>
        <a href='#' itemprop='url'>
          <span>Sub-menu 04</span>
        </a>
      </li>
    </ul>
    
  </b:tag>
</li>

Information:

Add open='' attribute to <b:tag name='details'> tag to keep the dropdown open.
Remove/replace one line of <b:include name='folder-2-icon'/> code to add a new icon.
Change the word/sentence in <span>Sub menu</span> tag to change the dropdown title.
Attribute href='#' for destination link.
<span>Sub-menu 01</span> tag for sub-menu title.
class='m' data-text='Mini heading' to add a small title in the sub-menu, replace 'Mini heading' with your own title

Alternative menu (Edit Through the Blogger Layout)

Pros:

Can be edited from the Blogger Layout.
Easily change page title and url.

Cons:

No dropdown,
no divider line,
can't change the icon.

This menu is more suitable for users who cannot edit HTML, users don't need to bother to open the Blogger HTML Editor to edit the navigation menu.

On the Blogger dashboard, click Layout,
find a widget named Main Menu, click icon on the widget.
Press the switch button on Show this widget,
click Save and the default navigation widget will be hidden.
Next, edit the Main Menu (alternative) widget and activate it by pressing the Show this widget switch button,
edit the list of links in the widget, you can delete, add or change the menu order.

Faq:

How to add a new dropdown menu?

You can directly copy the Dropdown navigation code above and paste it on a new line, the correct placement is like the following example:

<!--[ Standar menu ]-->
<li class='leftC'>...</li>

<!--[ Dropdown ]-->
<li class='leftC dr'>...</li>

// your_new_menu

How to change icons?

Icons can be changed by replacing the line of code marked with  or in the example above is the <b:include name='folder-2-icon'/> tag, all SVG icons will be automatically converted to dimensions of 20px/20px.

Example of correct application:

<!--[ icon ]-->
<b:include name='folder-2-icon'/>

<!--[ icon ]-->
<svg class='line' viewBox='0 0 24 24'><path d='M14.4301 5.92993L20.5001 11.9999L14.4301 18.0699'></path><path d='M3.5 12H20.33'></path></svg>

How do I change the destination link?

The new destination link must be written in the href attribute, in the example above we used href='#', replace the # symbol with your new url.

How to add line break to menu?

The separator line is used to categorize the menu from one another. To use it, add a new className br in the <li tag, for more details see the example below:

<!--[ Standar menu ]-->
<li class='leftC'>...</li>

<!--[ Dropdown ]-->
<li class='leftC dr'>...</li>

<!--[ Standar menu ]-->
<li class='leftC br'>...</li>

<!--[ Dropdown ]-->
<li class='leftC dr br'>...</li>