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.
-
Search for
<b:includable id='items-mainMenu'>, which looks something like the following:<!--[ Navigation Menu Items ]--> <b:includable id='items-mainMenu'> ... </b:includable> - You can edit you navigation menu items between
<b:includable id='items-mainMenu'>and</b:includable>. There are few items added by default, feel free to remove it and add your owns.
Standard menu
To add a standard menu, you can add the following code snippet by replacing marked parts with appropriate values:
<!--[ Standard menu ]-->
<li>
<!--[ Change attribute href='#' to add url ]-->
<a aria-label='Standard Menu' href='#' itemprop='url'>
<!--[ Icon ]-->
<b:include name='svg.folder-2'/>
<!--[ Title ]-->
<span itemprop='name'>Standard Menu</span>
</a>
</li>Dropdown menu
There are few dropdown menu styles you can use as follows:
Without icon in sub-menus
You can use this style if you do not want to add svg icons for sub-menus. You can add the following code snippet by replacing marked parts with appropriate values. Please note that svg icon for the toggle button is required to be added.
<!--[ Dropdown Menu ]-->
<li>
<input id='nav-drop-1' type='checkbox' checked=''/>
<label aria-label='Sub Menu' for='nav-drop-1' role='button'>
<!--[ Icon ]-->
<b:include name='svg.folder-2'/>
<!--[ Title ]-->
<span>Sub Menu</span>
</label>
<ul>
<li>
<!--[ Change attribute href='#' to add url ]-->
<a aria-label='Sub Menu 01' href='#' itemprop='url'>
<!--[ Title ]-->
<span itemprop='name'>Sub Menu 01</span>
</a>
</li>
<li>
<!--[ Change attribute href='#' to add url ]-->
<a aria-label='Sub Menu 02' href='#' itemprop='url'>
<!--[ Title ]-->
<span itemprop='name'>Sub Menu 02</span>
</a>
</li>
<li>
<!--[ Change attribute href='#' to add url ]-->
<a aria-label='Sub Menu 03' href='#' itemprop='url'>
<!--[ Title ]-->
<span itemprop='name'>Sub Menu 03</span>
</a>
</li>
</ul>
</li>With icon in sub-menus
The code snippet for it is similar to above, you only have to add your svg icon code above the title in sub-menu as shown below:
<!--[ Dropdown Menu ]-->
<li>
...
<ul>
...
<li>
<!--[ Change attribute href='#' to add url ]-->
<a aria-label='Sub Menu 01' href='#' itemprop='url'>
<!--[ Icon ]-->
<b:include name='svg.folder-2'/>
<!--[ Title ]-->
<span itemprop='name'>Sub Menu 01</span>
</a>
</li>
...
</ul>
</li>Sub-menus at top level
Toggle button becomes small and sub-menu behave same as standard menu but they can still be collapsed/expanded by clicking on the toggle button. You can add the following code snippet by replacing marked parts with appropriate values. Note that sub-menus are required to have svg icon.
<!--[ Dropdown Menu (Sub Menu at Top level) ]-->
<li class='mr'>
<input id='nav-drop-3' type='checkbox' checked=''/>
<label aria-label='More...' for='nav-drop-3' role='button'>
<!--[ Title ]-->
<span>More...</span>
</label>
<ul>
<li>
<!--[ Change attribute href='#' to add url ]-->
<a aria-label='Sub Menu 01' href='#' itemprop='url'>
<!--[ Icon ]-->
<b:include name='svg.folder-2'/>
<!--[ Title ]-->
<span itemprop='name'>Sub Menu 01</span>
</a>
</li>
<li>
<!--[ Change attribute href='#' to add url ]-->
<a aria-label='Sub Menu 02' href='#' itemprop='url'>
<!--[ Icon ]-->
<b:include name='svg.folder-2'/>
<!--[ Title ]-->
<span itemprop='name'>Sub Menu 02</span>
</a>
</li>
<li>
<!--[ Change attribute href='#' to add url ]-->
<a aria-label='Sub Menu 03' href='#' itemprop='url'>
<!--[ Icon ]-->
<b:include name='svg.folder-2'/>
<!--[ Title ]-->
<span itemprop='name'>Sub Menu 03</span>
</a>
</li>
</ul>
</li>