How to Edit Navigation Menu

Step by step edit, add or replace links and icons in the 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 Sub menu tag to change the dropdown title.
Attribute href='#' for destination link.
Sub-menu 01 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>

Menu navigasi tersedia dalam dua versi, yaitu menu default dengan tambahan dropdown dan menu alternatif tanpa dropdown, menu default hanya dapat diedit melalui Edit HTML.

Buka Blogger HTML Editor.
Cari widget HTML000, klik ikon untuk pencarian cepat.

Menu standar

Di widget navigasi, Anda akan menemukan kode seperti di bawah ini:

<!--[ 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>

Keterangan:

Ubah atribut href='#' dengan tautan tujuan Anda.
Ganti kata/kalimat yang ditandai dengan judul baru Anda.
Tambahkan ikon baru dengan mengganti kode bertanda <b:include name='profile-2user-icon'/> dengan ikon SVG, Lihat semua koleksi

Menu dropdown

Jika perlu, seperti untuk menulis satu atau beberapa kategori, Anda dapat menambahkan satu atau beberapa menu dropdown pada navigasi, kode untuk dropdown mirip dengan kode di bawah ini:

<!--[ 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:

Tambahkan atribut open='' pada tag <b:tag name='details'> agar dropdown tetap terbuka.
Hapus/ganti satu baris kode <b:include name='folder-2-icon'/> untuk menambahkan ikon baru.
Ubah kata/kalimat pada tag Sub menu untuk mengubah judul dropdown.
Atribut href='#' untuk tautan tujuan.
Tag Sub-menu 01 untuk judul sub-menu.
class='m' data-text='Mini heading' untuk menambahkan judul kecil di sub-menu, ganti tulisan 'Mini heading' dengan judul Anda

Alternatif menu (Edit melalui Tata Letak Blogger)

Kelebihan:

Dapat diedit dari Tata Letak Blogger.
Mudah mengubah judul halaman dan url.

kekurangan:

Tanpa dropdown.
Tidak ada garis pembatas.
Tidak bisa mengganti ikon.

Menu ini lebih cocok untuk pengguna yang tidak bisa mengedit HTML, pengguna tidak perlu repot-repot membuka Blogger HTML Editor untuk mengedit menu navigasi.

Pada dashboard Blogger, klik Tata Letak.
Cari widget dengan judul Main Menu, klik ikon pada widget tersebut.
Tekan tombol switch pada Tampilkan widget ini.
Klik Simpan dan widget navigasi default akan disembunyikan.
Selanjutnya, edit widget Main Menu (alternative) dan aktifkan dengan menekan tombol switch Tampilkan widget ini.
Edit daftar link dalam widget, Anda dapat menghapus, menambah, atau mengubah urutan menu.

Pertanyaan umum:

Bagaimana cara menambahkan menu dropdown baru?

Anda bisa langsung menyalin kode navigasi Dropdown di atas lalu menempelnya pada baris baru, penempatan yang benar adalah seperti contoh berikut:

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

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

// your_new_menu

Bagaimana cara mengganti ikon pada menu

Ikon dapat diubah dengan cara mengganti baris kode yang ditandai dengan  atau pada contoh di atas adalah tag <b:include name='folder-2-icon'/>, semua ikon SVG akan otomatis dikonversi ke ukuran 20px/20px.

Contoh penerapan yang benar:

<!--[ 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>

Bagaimana cara mengubah link tujuan?

Link tujuan baru harus dituliskan dalam atribut href, pada contoh di atas kami menggunakan href='#', gantilah simbol # dengan url baru Anda.

Bagaimana cara menambahkan baris pembatas pada menu?

Garis pemisah digunakan untuk mengkategorikan menu satu dengan lainnya. Untuk menggunakannya, tambahkan className baru br dalam tag <li, untuk lebih detailnya perhatikan contoh di bawah ini:

<!--[ 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>