Customizing Title Bar Navigation Menu Links - Vanilla Success
<main> <article class="userContent"> <h2 data-id="translations">Translations</h2><p>Default translations are done automatically. To bypass translations add an `@` at the being of the string.</p><h2 data-id="what-are-the-navigation-links">What are the navigation links?</h2><p>The title bar is the navigation toolbar at the top of knowledge base and Foundation based themes. It contains menu items that represent the global navigation of your site.</p><p>It looks like this by default.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/708/XBFCKIJ1BOWF.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/708/XBFCKIJ1BOWF.png" alt="image.png" height="94" width="2458" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="customizing-navigation-links">Customizing Navigation Links</h2><p> We can customize the Titlebar to use any custom navigation links we would like, instead of the default ones.</p><p>These can vary by language, but if a specific language is not found, the "default" will be used.</p><p>A permission can also be defined for displaying a certain link.</p><h3 data-id="setting-the-default-nav-items.">Setting the default nav items.</h3><p><strong>:themeID/assets/variables.json</strong></p><pre class="code codeBlock" spellcheck="false" tabindex="0">{ "navigation":{ "navItems": { "default": [ { "to": "/discussions", "children": "Discussions" }, { "to": "/categories", "children": "Categories" }, { "to": "/kb", "children": "Help", "permission": "kb.view" }, ] } } } </pre><h3 data-id="setting-links-for-a-specific-language">Setting links for a specific language</h3><p>This can be used alongside the default.</p><pre class="code codeBlock" spellcheck="false" tabindex="0">{ "navigation":{ "navItems": { "fr": [ { "to": "/kb", "children": "Innovation Hub", "permission": "kb.view" }, { "to": "/discussions", "children": "Latest Discussions" }, { "to": "/categories", "children": "Categories" }, ] } } } </pre><h2 data-id="handling-subcommunities">Handling Subcommunities</h2><p>By default all paths will have the current subcommunity applied to them. Let's look at an example, assuming that our site is at <code class="code codeInline" spellcheck="false" tabindex="0">community.mysite.com</code>.</p><pre class="code codeBlock" spellcheck="false" tabindex="0">{ "to": "/kb/getting-started", "children": "Getting Started" } </pre><p>If my site has <em>no subcommunities</em> then the actual URL this points to will be <code class="code codeInline" spellcheck="false" tabindex="0">community.mysite.com/kb/getting-started</code>.</p><p>If I do have subcommunities then the question becomes, <strong>which subcommunity will be used to make the URL? </strong>By default the <em>current</em> subcommunity the user is in will be used. So if I visit the page at <code class="code codeInline" spellcheck="false" tabindex="0">/fr/kb/articles/5-bienvenue</code> then the URL in the navigation will be <code class="code codeInline" spellcheck="false" tabindex="0">community.mysite.com/fr/kb/getting-started</code>.</p><h3 data-id="choosing-the-subcommunity-for-the-url">Choosing the subcommunity for the URL</h3><p>The simplest way to do this is to add a <code class="code codeInline" spellcheck="false" tabindex="0">~</code> to the start of your URL and manually specify our subcommunity. Let's update our definition.</p><pre class="code codeBlock" spellcheck="false" tabindex="0">{ "to": "~/other-fr/kb/getting-started", "children": "Getting Started" } </pre><p>By putting the <code class="code codeInline" spellcheck="false" tabindex="0">~</code> character, the subcommunity will <em>not</em> be added to the URL. So the final URL will be <code class="code codeInline" spellcheck="false" tabindex="0">community.mysite.com/other-fr/kb/getting-started</code>.</p><h3 data-id="hubnode-urls">Hub/Node URLs</h3><p>The current node's will be automatically added to all URL formats defined above if available.</p><h2 data-id="absolute-urls">Absolute URLs</h2><p>At this point you might be saying, <em>"What if I want a URL that goes somewhere else?". </em>That's easy enough. Just use a fully qualified URL.</p><pre class="code codeBlock" spellcheck="false" tabindex="0"> { "to": "https://mysite.com/products", "children": "Products" } </pre><p><br></p> </article> </main>