https://foxihd.github.io/hugo-foxx/en/tags/menu/Recent Posts in Menu on exampleHugo 0.161.1en-GBTue, 19 May 2026 16:10:01 +0000https://foxihd.github.io/hugo-foxx/en/configuration/configure-menu/Sun, 26 Jan 2025 00:00:00 +0000Author Namehttps://foxihd.github.io/hugo-foxx/en/configuration/configure-menu/How to configure the menu in Hugo Brewm theme<p>Learn how to configure menus in the Hugo Brewm theme using either <code>config.toml</code> or <code>menus[.lang].toml</code> files.</p> <h2 id="menu-parameters">Menu Parameters</h2> <ul> <li><code>identifier</code>: Unique identifier for each menu item</li> <li><code>name</code>: Text shown in the menu</li> <li><code>url</code>: External link destination</li> <li><code>pageRef</code>: Link to internal pages</li> <li><code>weight</code>: Menu item ordering (smaller numbers first)</li> <li><code>pre</code>: Icon placement</li> <li><code>post</code>: Description for the link</li> <li><code>parent</code>: Parent menu item reference</li> <li><code>params.target</code>: Set menu item link target</li> </ul> <h2 id="adding-icons">Adding Icons</h2> <p>Add icons to your menu items with the <code>pre</code> parameter.</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[[</span><span class="nx">menu</span><span class="p">.</span><span class="nx">main</span><span class="p">]]</span> </span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;github&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;GitHub&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nx">url</span> <span class="p">=</span> <span class="s2">&#34;https://github.com/&#34;</span> </span></span><span class="line hl"><span class="cl"> <span class="nx">pre</span> <span class="p">=</span> <span class="s2">&#34;github&#34;</span> </span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">menu</span><span class="p">.</span><span class="nx">main</span><span class="p">.</span><span class="nx">params</span><span class="p">]]</span> </span></span><span class="line"><span class="cl"> <span class="nx">target</span> <span class="p">=</span> <span class="s2">&#34;_blank&#34;</span> </span></span></code></pre></div><p>Here are all the supported list icons and their corresponding names that can be used when configuring your menu items:</p> <ul id="icon-list" role="presentation"> <li><i class="icon email"></i> email </li> <li><i class="icon rss"></i> rss </li> <li><i class="icon behance"></i> behance </li> <li><i class="icon bigcartel"></i> bigcartel </li> <li><i class="icon bitbucket"></i> bitbucket </li> <li><i class="icon blogger"></i> blogger </li> <li><i class="icon bluesky"></i> bluesky </li> <li><i class="icon bukalapak"></i> bukalapak </li> <li><i class="icon buymeacoffee"></i> buymeacoffee </li> <li><i class="icon clubhouse"></i> clubhouse </li> <li><i class="icon codepen"></i> codepen </li> <li><i class="icon creativefabrica"></i> creativefabrica </li> <li><i class="icon dailymotion"></i> dailymotion </li> <li><i class="icon dev"></i> dev </li> <li><i class="icon deviantart"></i> deviantart </li> <li><i class="icon digg"></i> digg </li> <li><i class="icon dribbble"></i> dribbble </li> <li><i class="icon ebay"></i> ebay </li> <li><i class="icon etsy"></i> etsy </li> <li><i class="icon facebook"></i> facebook </li> <li><i class="icon figma"></i> figma </li> <li><i class="icon flickr"></i> flickr </li> <li><i class="icon flipkart"></i> flipkart </li> <li><i class="icon github"></i> github </li> <li><i class="icon githubsponsors"></i> githubsponsors </li> <li><i class="icon gitlab"></i> gitlab </li> <li><i class="icon gnusocial"></i> gnusocial </li> <li><i class="icon goodreads"></i> goodreads </li> <li><i class="icon googlescholar"></i> googlescholar </li> <li><i class="icon gumroad"></i> gumroad </li> <li><i class="icon hackernews"></i> hackernews </li> <li><i class="icon hashnode"></i> hashnode </li> <li><i class="icon icon--500px"></i> icon–500px </li> <li><i class="icon instagram"></i> instagram </li> <li><i class="icon jsfiddle"></i> jsfiddle </li> <li><i class="icon karyakarsa"></i> karyakarsa </li> <li><i class="icon keybase"></i> keybase </li> <li><i class="icon keycdn"></i> keycdn </li> <li><i class="icon kickstarter"></i> kickstarter </li> <li><i class="icon kofi"></i> kofi </li> <li><i class="icon lazada"></i> lazada </li> <li><i class="icon liberapay"></i> liberapay </li> <li><i class="icon linkedin"></i> linkedin </li> <li><i class="icon mastodon"></i> mastodon </li> <li><i class="icon medium"></i> medium </li> <li><i class="icon olx"></i> olx </li> <li><i class="icon opencollective"></i> opencollective </li> <li><i class="icon openid"></i> openid </li> <li><i class="icon orcid"></i> orcid </li> <li><i class="icon patreon"></i> patreon </li> <li><i class="icon paypal"></i> paypal </li> <li><i class="icon peertube"></i> peertube </li> <li><i class="icon pinterest"></i> pinterest </li> <li><i class="icon pixelfed"></i> pixelfed </li> <li><i class="icon pleroma"></i> pleroma </li> <li><i class="icon publons"></i> publons </li> <li><i class="icon quora"></i> quora </li> <li><i class="icon reddit"></i> reddit </li> <li><i class="icon researchgate"></i> researchgate </li> <li><i class="icon saweria"></i> saweria </li> <li><i class="icon sellfy"></i> sellfy </li> <li><i class="icon shopee"></i> shopee </li> <li><i class="icon shopify"></i> shopify </li> <li><i class="icon signal"></i> signal </li> <li><i class="icon snapchat"></i> snapchat </li> <li><i class="icon soundcloud"></i> soundcloud </li> <li><i class="icon stackexchange"></i> stackexchange </li> <li><i class="icon stackoverflow"></i> stackoverflow </li> <li><i class="icon stripe"></i> stripe </li> <li><i class="icon substack"></i> substack </li> <li><i class="icon tangled"></i> tangled </li> <li><i class="icon telegram"></i> telegram </li> <li><i class="icon threads"></i> threads </li> <li><i class="icon tiktok"></i> tiktok </li> <li><i class="icon tokopedia"></i> tokopedia </li> <li><i class="icon tumblr"></i> tumblr </li> <li><i class="icon twitch"></i> twitch </li> <li><i class="icon twitter"></i> twitter </li> <li><i class="icon vimeo"></i> vimeo </li> <li><i class="icon vine"></i> vine </li> <li><i class="icon wattpad"></i> wattpad </li> <li><i class="icon weibo"></i> weibo </li> <li><i class="icon whatsapp"></i> whatsapp </li> <li><i class="icon wikipedia"></i> wikipedia </li> <li><i class="icon wordpress"></i> wordpress </li> <li><i class="icon write-dot-as"></i> write-dot-as </li> <li><i class="icon x"></i> x </li> <li><i class="icon xing"></i> xing </li> <li><i class="icon xmpp"></i> xmpp </li> <li><i class="icon youtube"></i> youtube </li> </ul> <h2 id="creating-nested-menus">Creating Nested Menus</h2> <p>Create dropdown menus by using the <code>parent</code> parameter:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[[</span><span class="nx">menu</span><span class="p">.</span><span class="nx">main</span><span class="p">]]</span> </span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;about&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;About&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nx">pageRef</span> <span class="p">=</span> <span class="s2">&#34;/about&#34;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">menu</span><span class="p">.</span><span class="nx">main</span><span class="p">]]</span> </span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;about-author&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Author&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nx">pageRef</span> <span class="p">=</span> <span class="s2">&#34;/about/author&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nx">parent</span> <span class="p">=</span> <span class="s2">&#34;about&#34;</span> </span></span></code></pre></div><h2 id="language-support">Language Support</h2> <p>There are three ways to add multi-language support to your menus:</p> <h3 id="1-using-menulangmenuid">1. Using <code>menu.[lang].[menuID]</code></h3> <p>In <code>config.toml</code>:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[[</span><span class="nx">menu</span><span class="p">.</span><span class="nx">en</span><span class="p">.</span><span class="nx">main</span><span class="p">]]</span> </span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;about&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;About&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nx">url</span> <span class="p">=</span> <span class="s2">&#34;/about/&#34;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">menu</span><span class="p">.</span><span class="nx">en</span><span class="p">.</span><span class="nx">main</span><span class="p">]]</span> </span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;about-author&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Author&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nx">pageRef</span> <span class="p">=</span> <span class="s2">&#34;/about/author&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nx">parent</span> <span class="p">=</span> <span class="s2">&#34;about&#34;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">[[</span><span class="nx">menu</span><span class="p">.</span><span class="nx">id</span><span class="p">.</span><span class="nx">main</span><span class="p">]]</span> </span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;about&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Tentang&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nx">url</span> <span class="p">=</span> <span class="s2">&#34;/tentang/&#34;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">menu</span><span class="p">.</span><span class="nx">id</span><span class="p">.</span><span class="nx">main</span><span class="p">]]</span> </span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;about-author&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Tentang Penyusun&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nx">pageRef</span> <span class="p">=</span> <span class="s2">&#34;/tentang/penyusun&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nx">parent</span> <span class="p">=</span> <span class="s2">&#34;about&#34;</span> </span></span></code></pre></div><h3 id="2-using-separate-menu-files">2. Using Separate Menu Files</h3> <p>In <code>menus.en.toml</code>:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[[</span><span class="nx">main</span><span class="p">]]</span> </span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;about&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;About&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nx">url</span> <span class="p">=</span> <span class="s2">&#34;/about/&#34;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">main</span><span class="p">]]</span> </span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;about-author&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Author&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nx">pageRef</span> <span class="p">=</span> <span class="s2">&#34;/about/author&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nx">parent</span> <span class="p">=</span> <span class="s2">&#34;about&#34;</span> </span></span></code></pre></div><p>In <code>menus.id.toml</code>:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[[</span><span class="nx">main</span><span class="p">]]</span> </span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;about&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Tentang&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nx">url</span> <span class="p">=</span> <span class="s2">&#34;/tentang/&#34;</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">menu</span><span class="p">.</span><span class="nx">id</span><span class="p">.</span><span class="nx">main</span><span class="p">]]</span> </span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s2">&#34;about-author&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nx">name</span> <span class="p">=</span> <span class="s2">&#34;Tentang Penyusun&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nx">pageRef</span> <span class="p">=</span> <span class="s2">&#34;/tentang/penyusun&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nx">parent</span> <span class="p">=</span> <span class="s2">&#34;about&#34;</span> </span></span></code></pre></div><h3 id="3-using-front-matter-in-markdown-files">3. Using Front Matter in Markdown Files</h3> <p>in <code>index[.lang].md</code> <code>_index[.lang].md</code> or <code>filename[.lang].md</code></p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">---</span> </span></span><span class="line"><span class="cl"><span class="nx">title</span><span class="err">:</span> <span class="s2">&#34;About Author&#34;</span> </span></span><span class="line"><span class="cl"><span class="nx">menus</span><span class="err">:</span> </span></span><span class="line"><span class="cl"> <span class="nx">main</span><span class="err">:</span> </span></span><span class="line"><span class="cl"> <span class="nx">indetifier</span><span class="err">:</span> <span class="nx">about-author</span> </span></span><span class="line"><span class="cl"> <span class="nx">parent</span><span class="err">:</span> <span class="nx">about</span> </span></span><span class="line"><span class="cl"><span class="nx">---</span> </span></span></code></pre></div>Configuration