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 HTML.
Menu Generator (Recommended)
Use this tool to generate Navigation Menu HTML with ease.
- Go to Blogger Layout.
-
Find Navigation Menu HTML widget, and click on pencil icon next to it.
Don't get confused with Navigation Menu (Simple) which is a Pages widget and not HTML widget.
- If you want to restore existing HTML, copy the widget's HTML content and paste it into tool's Restore input.
- Customize your menu in the tool.
- Copy the HTML code generated by the tool.
- Replace the existing content in widget with generated HTML.
Tips!
To move a menu, click and hold -> drag -> drop.
To change icon, click on the icon.
Click on more icon for menu specific options.
It is recommended to use the minified HTML if possible.
To change icon, click on the icon.
Click on more icon for menu specific options.
It is recommended to use the minified HTML if possible.
<!--[ Standard menu (1) ]--> <li> <a aria-label="Blog" href="https://example.com/search/label/Blog" itemprop="url"> <!--[ Icon ]--> <svg class="line" viewBox="0 0 24 24"><path d="M22 11V17C22 21 21 22 17 22H7C3 22 2 21 2 17V7C2 3 3 2 7 2H8.5C10 2 10.33 2.44 10.9 3.2L12.4 5.2C12.78 5.7 13 6 14 6H17C21 6 22 7 22 11Z" stroke-miterlimit="10"></path><path d="M8 2H17C19 2 20 3 20 5V6.38" stroke-miterlimit="10"></path></svg> <!--[ Title ]--> <span itemprop="name">Blog</span> </a> </li> <!--[ Dropdown Menu (2) ]--> <li class="br"> <input id="nav-menu-2-state" type="checkbox" checked=""/> <label for="nav-menu-2-state" role="button" aria-label="Categories"> <!--[ Icon ]--> <svg class="line" viewBox="0 0 24 24"><path d="M4.21995 3.09998H15.6599C16.3399 3.09998 17.19 3.56998 17.55 4.14998L21.73 10.83C22.13 11.48 22.09 12.5 21.63 13.11L16.45 20.01C16.08 20.5 15.28 20.9 14.67 20.9H4.21995C2.46995 20.9 1.40999 18.98 2.32999 17.49L5.09995 13.06C5.46995 12.47 5.46995 11.51 5.09995 10.92L2.32999 6.48998C1.40999 5.01998 2.47995 3.09998 4.21995 3.09998Z" stroke-miterlimit="10"></path></svg> <!--[ Title ]--> <span itemprop="name">Categories</span> </label> <ul> <!--[ Sub Menu (2.1) ]--> <li> <a aria-label="Photography" href="#" 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> <!--[ Sub Menu (2.2) ]--> <li> <a aria-label="Game" href="#" itemprop="url"> <!--[ Icon ]--> <svg class="line" viewBox="0 0 24 24"><path d="M9.57002 12.46L6.52002 15.51" stroke-miterlimit="10"></path><path d="M6.55005 12.49L9.60005 15.54" stroke-miterlimit="10"></path><path d="M13.53 14H13.54" stroke-miterlimit="10"></path><path d="M17.47 14H17.48" stroke-miterlimit="10"></path><path d="M15.5 15.98V15.96" stroke-miterlimit="10"></path><path d="M15.5 12.04V12.02" stroke-miterlimit="10"></path><path d="M9 22H15C20 22 22 20 22 15V13C22 8 20 6 15 6H9C4 6 2 8 2 13V15C2 20 4 22 9 22Z"></path><path d="M13.01 2L13 3.01C12.99 3.56 12.55 4 12 4H11.97C11.42 4 10.98 4.45 10.98 5C10.98 5.55 11.43 6 11.98 6H12.98"></path></svg> <!--[ Title ]--> <span itemprop="name">Game</span> </a> </li> </ul> </li> <!--[ Standard menu (3) ]--> <li> <a aria-label="About" href="https://example.com/p/about.html" itemprop="url"> <!--[ Icon ]--> <svg class="line" viewBox="0 0 24 24"><path d="M9.16006 10.87C9.06006 10.86 8.94006 10.86 8.83006 10.87C6.45006 10.79 4.56006 8.84 4.56006 6.44C4.56006 3.99 6.54006 2 9.00006 2C11.4501 2 13.4401 3.99 13.4401 6.44C13.4301 8.84 11.5401 10.79 9.16006 10.87Z"></path><path d="M16.41 4C18.35 4 19.91 5.57 19.91 7.5C19.91 9.39 18.41 10.93 16.54 11C16.46 10.99 16.37 10.99 16.28 11"></path><path d="M4.15997 14.56C1.73997 16.18 1.73997 18.82 4.15997 20.43C6.90997 22.27 11.42 22.27 14.17 20.43C16.59 18.81 16.59 16.17 14.17 14.56C11.43 12.73 6.91997 12.73 4.15997 14.56Z"></path><path d="M18.3401 20C19.0601 19.85 19.7401 19.56 20.3001 19.13C21.8601 17.96 21.8601 16.03 20.3001 14.86C19.7501 14.44 19.0801 14.16 18.3701 14"></path></svg> <!--[ Title ]--> <span itemprop="name">About</span> </a> </li> <!--[ Standard menu (4) ]--> <li> <a aria-label="Contact" href="https://example.com/p/contact.html" itemprop="url"> <!--[ Icon ]--> <svg class="line" viewBox="0 0 24 24"><path d="M12 20.5H7C4 20.5 2 19 2 15.5V8.5C2 5 4 3.5 7 3.5H17C20 3.5 22 5 22 8.5V11.5" stroke-miterlimit="10"></path><path d="M17 9L13.87 11.5C12.84 12.32 11.15 12.32 10.12 11.5L7 9" stroke-miterlimit="10"></path><path d="M19.21 14.77L15.6701 18.31C15.5301 18.45 15.4 18.71 15.37 18.9L15.18 20.25C15.11 20.74 15.45 21.0801 15.94 21.0101L17.29 20.82C17.48 20.79 17.75 20.66 17.88 20.52L21.4201 16.9801C22.0301 16.3701 22.3201 15.6601 21.4201 14.7601C20.5301 13.8701 19.82 14.16 19.21 14.77Z" stroke-miterlimit="10"></path><path d="M18.7001 15.28C19.0001 16.36 19.8401 17.2 20.9201 17.5" stroke-miterlimit="10"></path></svg> <!--[ Title ]--> <span itemprop="name">Contact</span> </a> </li> <!--[ Dropdown Menu (5) ]--> <li class="br"> <input id="nav-menu-5-state" type="checkbox"/> <label for="nav-menu-5-state" role="button" aria-label="Legal"> <!--[ Icon ]--> <svg class="line" viewBox="0 0 24 24"><path d="M21 7V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V7C3 4 4.5 2 8 2H16C19.5 2 21 4 21 7Z" stroke-miterlimit="10"></path><path d="M14.5 4.5V6.5C14.5 7.6 15.4 8.5 16.5 8.5H18.5" stroke-miterlimit="10"></path><path d="M8 13H12" stroke-miterlimit="10"></path><path d="M8 17H16" stroke-miterlimit="10"></path></svg> <!--[ Title ]--> <span itemprop="name">Legal</span> </label> <ul> <!--[ Sub Menu (5.1) ]--> <li> <a aria-label="Privacy Policy" href="#" itemprop="url"> <!--[ Title ]--> <span itemprop="name">Privacy Policy</span> </a> </li> </ul> </li> <!--[ Standard menu (6) ]--> <li> <a aria-label="Sitemap" href="#" itemprop="url"> <!--[ Icon ]--> <svg class="line" viewBox="0 0 24 24"><path d="M20 14C21.1046 14 22 13.1046 22 12C22 10.8954 21.1046 10 20 10C18.8954 10 18 10.8954 18 12C18 13.1046 18.8954 14 20 14Z"></path><path d="M20 6C21.1046 6 22 5.10457 22 4C22 2.89543 21.1046 2 20 2C18.8954 2 18 2.89543 18 4C18 5.10457 18.8954 6 20 6Z"></path><path d="M20 22C21.1046 22 22 21.1046 22 20C22 18.8954 21.1046 18 20 18C18.8954 18 18 18.8954 18 20C18 21.1046 18.8954 22 20 22Z"></path><path d="M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z"></path><path d="M6 12H18"></path><path d="M18 4H14C12 4 11 5 11 7V17C11 19 12 20 14 20H18"></path></svg> <!--[ Title ]--> <span itemprop="name">Sitemap</span> </a> </li>
[ { "name": "Blog", "icon": "<svg class=\"line\" viewBox=\"0 0 24 24\"><path d=\"M22 11V17C22 21 21 22 17 22H7C3 22 2 21 2 17V7C2 3 3 2 7 2H8.5C10 2 10.33 2.44 10.9 3.2L12.4 5.2C12.78 5.7 13 6 14 6H17C21 6 22 7 22 11Z\" stroke-miterlimit=\"10\"></path><path d=\"M8 2H17C19 2 20 3 20 5V6.38\" stroke-miterlimit=\"10\"></path></svg>", "link": "https://example.com/search/label/Blog" }, { "name": "Categories", "icon": "<svg class=\"line\" viewBox=\"0 0 24 24\"><path d=\"M4.21995 3.09998H15.6599C16.3399 3.09998 17.19 3.56998 17.55 4.14998L21.73 10.83C22.13 11.48 22.09 12.5 21.63 13.11L16.45 20.01C16.08 20.5 15.28 20.9 14.67 20.9H4.21995C2.46995 20.9 1.40999 18.98 2.32999 17.49L5.09995 13.06C5.46995 12.47 5.46995 11.51 5.09995 10.92L2.32999 6.48998C1.40999 5.01998 2.47995 3.09998 4.21995 3.09998Z\" stroke-miterlimit=\"10\"></path></svg>", "items": [ { "name": "Photography", "link": "#", "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>" }, { "name": "Game", "link": "#", "icon": "<svg class=\"line\" viewBox=\"0 0 24 24\"><path d=\"M9.57002 12.46L6.52002 15.51\" stroke-miterlimit=\"10\"></path><path d=\"M6.55005 12.49L9.60005 15.54\" stroke-miterlimit=\"10\"></path><path d=\"M13.53 14H13.54\" stroke-miterlimit=\"10\"></path><path d=\"M17.47 14H17.48\" stroke-miterlimit=\"10\"></path><path d=\"M15.5 15.98V15.96\" stroke-miterlimit=\"10\"></path><path d=\"M15.5 12.04V12.02\" stroke-miterlimit=\"10\"></path><path d=\"M9 22H15C20 22 22 20 22 15V13C22 8 20 6 15 6H9C4 6 2 8 2 13V15C2 20 4 22 9 22Z\"></path><path d=\"M13.01 2L13 3.01C12.99 3.56 12.55 4 12 4H11.97C11.42 4 10.98 4.45 10.98 5C10.98 5.55 11.43 6 11.98 6H12.98\"></path></svg>" } ], "open": true, "break": true }, { "name": "About", "icon": "<svg class=\"line\" viewBox=\"0 0 24 24\"><path d=\"M9.16006 10.87C9.06006 10.86 8.94006 10.86 8.83006 10.87C6.45006 10.79 4.56006 8.84 4.56006 6.44C4.56006 3.99 6.54006 2 9.00006 2C11.4501 2 13.4401 3.99 13.4401 6.44C13.4301 8.84 11.5401 10.79 9.16006 10.87Z\"></path><path d=\"M16.41 4C18.35 4 19.91 5.57 19.91 7.5C19.91 9.39 18.41 10.93 16.54 11C16.46 10.99 16.37 10.99 16.28 11\"></path><path d=\"M4.15997 14.56C1.73997 16.18 1.73997 18.82 4.15997 20.43C6.90997 22.27 11.42 22.27 14.17 20.43C16.59 18.81 16.59 16.17 14.17 14.56C11.43 12.73 6.91997 12.73 4.15997 14.56Z\"></path><path d=\"M18.3401 20C19.0601 19.85 19.7401 19.56 20.3001 19.13C21.8601 17.96 21.8601 16.03 20.3001 14.86C19.7501 14.44 19.0801 14.16 18.3701 14\"></path></svg>", "link": "https://example.com/p/about.html" }, { "name": "Contact", "icon": "<svg class=\"line\" viewBox=\"0 0 24 24\"><path d=\"M12 20.5H7C4 20.5 2 19 2 15.5V8.5C2 5 4 3.5 7 3.5H17C20 3.5 22 5 22 8.5V11.5\" stroke-miterlimit=\"10\"></path><path d=\"M17 9L13.87 11.5C12.84 12.32 11.15 12.32 10.12 11.5L7 9\" stroke-miterlimit=\"10\"></path><path d=\"M19.21 14.77L15.6701 18.31C15.5301 18.45 15.4 18.71 15.37 18.9L15.18 20.25C15.11 20.74 15.45 21.0801 15.94 21.0101L17.29 20.82C17.48 20.79 17.75 20.66 17.88 20.52L21.4201 16.9801C22.0301 16.3701 22.3201 15.6601 21.4201 14.7601C20.5301 13.8701 19.82 14.16 19.21 14.77Z\" stroke-miterlimit=\"10\"></path><path d=\"M18.7001 15.28C19.0001 16.36 19.8401 17.2 20.9201 17.5\" stroke-miterlimit=\"10\"></path></svg>", "link": "https://example.com/p/contact.html" }, { "name": "Legal", "icon": "<svg class=\"line\" viewBox=\"0 0 24 24\"><path d=\"M21 7V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V7C3 4 4.5 2 8 2H16C19.5 2 21 4 21 7Z\" stroke-miterlimit=\"10\"></path><path d=\"M14.5 4.5V6.5C14.5 7.6 15.4 8.5 16.5 8.5H18.5\" stroke-miterlimit=\"10\"></path><path d=\"M8 13H12\" stroke-miterlimit=\"10\"></path><path d=\"M8 17H16\" stroke-miterlimit=\"10\"></path></svg>", "items": [ { "name": "Privacy Policy", "link": "#" } ], "break": true }, { "name": "Sitemap", "icon": "<svg class=\"line\" viewBox=\"0 0 24 24\"><path d=\"M20 14C21.1046 14 22 13.1046 22 12C22 10.8954 21.1046 10 20 10C18.8954 10 18 10.8954 18 12C18 13.1046 18.8954 14 20 14Z\"></path><path d=\"M20 6C21.1046 6 22 5.10457 22 4C22 2.89543 21.1046 2 20 2C18.8954 2 18 2.89543 18 4C18 5.10457 18.8954 6 20 6Z\"></path><path d=\"M20 22C21.1046 22 22 21.1046 22 20C22 18.8954 21.1046 18 20 18C18.8954 18 18 18.8954 18 20C18 21.1046 18.8954 22 20 22Z\"></path><path d=\"M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z\"></path><path d=\"M6 12H18\"></path><path d=\"M18 4H14C12 4 11 5 11 7V17C11 19 12 20 14 20H18\"></path></svg>", "link": "#" } ]
Manual
- 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. - If you have edited Navigation Menu HTML widget earlier, make sure it is empty by navigating to Blogger Layout.
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>
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.
Warning!
Please note that svg icon for the toggle button is still required to be included.
<!--[ Dropdown Menu ]--> <li> <input id='nav-drop-1' type='checkbox' checked=''/> <label for='nav-drop-1' aria-label='Sub Menu' 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 for='nav-drop-1' aria-label='Categories' 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 for='nav-drop-2' aria-label='Categories' 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 for='nav-drop-3' aria-label='More...' 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.
