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 your 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><!--[ Standard menu ]-->
<li>
<!--[ Change attribute href='#' to add url ]-->
<a aria-label='Photography' href='/search/label/Photography' itemprop='url'>
<!--[ Icon ]-->
<svg class='line' viewBox='0 0 24 24'><path d='M6.76005 22H17.24C20 22 21.1 20.31 21.23 18.25L21.75 9.99C21.89 7.83 20.17 6 18 6C17.39 6 16.83 5.65 16.55 5.11L15.83 3.66C15.37 2.75 14.17 2 13.15 2H10.86C9.83005 2 8.63005 2.75 8.17005 3.66L7.45005 5.11C7.17005 5.65 6.61005 6 6.00005 6C3.83005 6 2.11005 7.83 2.25005 9.99L2.77005 18.25C2.89005 20.31 4.00005 22 6.76005 22Z'></path><path d='M10.5 8H13.5'></path><path d='M12 18C13.79 18 15.25 16.54 15.25 14.75C15.25 12.96 13.79 11.5 12 11.5C10.21 11.5 8.75 12.96 8.75 14.75C8.75 16.54 10.21 18 12 18Z'></path></svg>
<!--[ Title ]-->
<span itemprop='name'>Photography</span>
</a>
</li>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><!--[ Dropdown Menu ]-->
<li>
<input id='nav-drop-1' type='checkbox' checked=''/>
<label aria-label='Categories' for='nav-drop-1' role='button'>
<!--[ Icon ]-->
<svg class='line' viewBox='0 0 24 24'><path d='M5 10H7C9 10 10 9 10 7V5C10 3 9 2 7 2H5C3 2 2 3 2 5V7C2 9 3 10 5 10Z' stroke-miterlimit='10'></path><path d='M17 10H19C21 10 22 9 22 7V5C22 3 21 2 19 2H17C15 2 14 3 14 5V7C14 9 15 10 17 10Z' stroke-miterlimit='10'></path><path d='M17 22H19C21 22 22 21 22 19V17C22 15 21 14 19 14H17C15 14 14 15 14 17V19C14 21 15 22 17 22Z' stroke-miterlimit='10'></path><path d='M5 22H7C9 22 10 21 10 19V17C10 15 9 14 7 14H5C3 14 2 15 2 17V19C2 21 3 22 5 22Z' stroke-miterlimit='10'></path></svg>
<!--[ Title ]-->
<span>Categories</span>
</label>
<ul>
<li>
<!--[ Change attribute href='#' to add url ]-->
<a aria-label='Photography' href='/search/label/Photography' itemprop='url'>
<!--[ Title ]-->
<span itemprop='name'>Photography</span>
</a>
</li>
<li>
<!--[ Change attribute href='#' to add url ]-->
<a aria-label='Art' href='/search/label/Art' itemprop='url'>
<!--[ Title ]-->
<span itemprop='name'>Art</span>
</a>
</li>
<li>
<!--[ Change attribute href='#' to add url ]-->
<a aria-label='Blog' href='/search/label/Blog' itemprop='url'>
<!--[ Title ]-->
<span itemprop='name'>Blog</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><!--[ Dropdown Menu ]-->
<li>
<input id='nav-drop-2' type='checkbox' checked=''/>
<label aria-label='Categories' for='nav-drop-2' role='button'>
<!--[ Icon ]-->
<svg class='line' viewBox='0 0 24 24'><path d='M5 10H7C9 10 10 9 10 7V5C10 3 9 2 7 2H5C3 2 2 3 2 5V7C2 9 3 10 5 10Z' stroke-miterlimit='10'></path><path d='M17 10H19C21 10 22 9 22 7V5C22 3 21 2 19 2H17C15 2 14 3 14 5V7C14 9 15 10 17 10Z' stroke-miterlimit='10'></path><path d='M17 22H19C21 22 22 21 22 19V17C22 15 21 14 19 14H17C15 14 14 15 14 17V19C14 21 15 22 17 22Z' stroke-miterlimit='10'></path><path d='M5 22H7C9 22 10 21 10 19V17C10 15 9 14 7 14H5C3 14 2 15 2 17V19C2 21 3 22 5 22Z' stroke-miterlimit='10'></path></svg>
<!--[ Title ]-->
<span>Categories</span>
</label>
<ul>
<li>
<!--[ Change attribute href='#' to add url ]-->
<a aria-label='Photography' href='/search/label/Photography' itemprop='url'>
<!--[ Icon ]-->
<svg class='line' viewBox='0 0 24 24'><path d='M6.76005 22H17.24C20 22 21.1 20.31 21.23 18.25L21.75 9.99C21.89 7.83 20.17 6 18 6C17.39 6 16.83 5.65 16.55 5.11L15.83 3.66C15.37 2.75 14.17 2 13.15 2H10.86C9.83005 2 8.63005 2.75 8.17005 3.66L7.45005 5.11C7.17005 5.65 6.61005 6 6.00005 6C3.83005 6 2.11005 7.83 2.25005 9.99L2.77005 18.25C2.89005 20.31 4.00005 22 6.76005 22Z'></path><path d='M10.5 8H13.5'></path><path d='M12 18C13.79 18 15.25 16.54 15.25 14.75C15.25 12.96 13.79 11.5 12 11.5C10.21 11.5 8.75 12.96 8.75 14.75C8.75 16.54 10.21 18 12 18Z'></path></svg>
<!--[ Title ]-->
<span itemprop='name'>Photography</span>
</a>
</li>
<li>
<!--[ Change attribute href='#' to add url ]-->
<a aria-label='Art' href='/search/label/Art' itemprop='url'>
<!--[ Icon ]-->
<svg class='line' viewBox='0 0 24 24'><path d='M10 4.5V18C10 19.08 9.55999 20.07 8.85999 20.79L8.82001 20.83C8.73001 20.92 8.63001 21.01 8.54001 21.08C8.24001 21.34 7.89999 21.54 7.54999 21.68C7.43999 21.73 7.33 21.77 7.22 21.81C6.83 21.94 6.41 22 6 22C5.73 22 5.46001 21.97 5.20001 21.92C5.07001 21.89 4.94 21.86 4.81 21.82C4.65 21.77 4.50001 21.72 4.35001 21.65C4.35001 21.64 4.35 21.64 4.34 21.65C4.06 21.51 3.79001 21.35 3.54001 21.16L3.53 21.15C3.4 21.05 3.28001 20.95 3.17001 20.83C3.06001 20.71 2.95 20.59 2.84 20.46C2.65 20.21 2.49001 19.94 2.35001 19.66C2.36001 19.65 2.36001 19.65 2.35001 19.65C2.35001 19.65 2.35 19.64 2.34 19.63C2.28 19.49 2.22999 19.34 2.17999 19.19C2.13999 19.06 2.10999 18.93 2.07999 18.8C2.02999 18.54 2 18.27 2 18V4.5C2 3 3 2 4.5 2H7.5C9 2 10 3 10 4.5Z'></path><path d='M22 16.5V19.5C22 21 21 22 19.5 22H6C6.41 22 6.83 21.94 7.22 21.81C7.33 21.77 7.43999 21.73 7.54999 21.68C7.89999 21.54 8.24001 21.34 8.54001 21.08C8.63001 21.01 8.73001 20.92 8.82001 20.83L8.85999 20.79L15.66 14H19.5C21 14 22 15 22 16.5Z'></path><path d='M4.81 21.8199C4.21 21.6399 3.64001 21.3099 3.17001 20.8299C2.69001 20.3599 2.35999 19.7899 2.17999 19.1899C2.56999 20.4399 3.56 21.4299 4.81 21.8199Z'></path><path d='M18.37 11.2899L15.66 14L8.85999 20.7899C9.55999 20.0699 10 19.08 10 18V8.33995L12.71 5.62996C13.77 4.56996 15.19 4.56996 16.25 5.62996L18.37 7.74996C19.43 8.80996 19.43 10.2299 18.37 11.2899Z'></path><path d='M6 19C6.55228 19 7 18.5523 7 18C7 17.4477 6.55228 17 6 17C5.44772 17 5 17.4477 5 18C5 18.5523 5.44772 19 6 19Z'></path></svg>
<!--[ Title ]-->
<span itemprop='name'>Art</span>
</a>
</li>
<li>
<!--[ Change attribute href='#' to add url ]-->
<a aria-label='Blog' href='/search/label/Blog' itemprop='url'>
<!--[ Icon ]-->
<svg class='line' viewBox='0 0 24 24'><path d='M13.26 3.59997L5.04997 12.29C4.73997 12.62 4.43997 13.27 4.37997 13.72L4.00997 16.96C3.87997 18.13 4.71997 18.93 5.87997 18.73L9.09997 18.18C9.54997 18.1 10.18 17.77 10.49 17.43L18.7 8.73997C20.12 7.23997 20.76 5.52997 18.55 3.43997C16.35 1.36997 14.68 2.09997 13.26 3.59997Z' stroke-miterlimit='10'></path><path d='M11.89 5.05005C12.32 7.81005 14.56 9.92005 17.34 10.2' stroke-miterlimit='10'></path><path d='M3 22H21' stroke-miterlimit='10'></path></svg>
<!--[ Title ]-->
<span itemprop='name'>Blog</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>Customizing further
If you want to make more customizations to Navigation Menu like changing its width for desktop view, changing text color, etc. you can do that from Theme Designer.
- Go to Blogger Theme Designer.
- Click on Advanced tab.
- From dropdown selection list, select Style: Navigation Menu.
How to keep Navigation Menu expanded by default for desktop view?
The option to change this behaviour was added in v3.1. You can find this option if and only if you are using v3.1 or above.
Navigate to Style: Navigation Menu as described above, set the length of Navbar default state (Desktop) to 1px or 2px to keep the navigation menu in desktop view collapsed or expanded respectively.
From where I can get SVG icons?
You can find few SVG icons here.
