Configure Your Quick Links Menu - HL Vanilla Community
<main> <article class="userContent"> <p>The <strong>Quick Links</strong> menu makes it easy for your users to navigate to essential parts of your in your <strong>Higher Logic Vanilla</strong> (<strong>Vanilla</strong>) community.</p><p>By default, the menu appears in the right side panel on most community pages. It displays a customizable list of "quick access" links to:</p><ul><li><strong>community-based content</strong>, such as the Categories list page, the Recent Discussions page, and the Best Of page.</li><li><strong>user-based content</strong>, such as drafts, bookmarks, group pages, and discussions.</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/EVP2Z15DJ08Z/quick-links.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/EVP2Z15DJ08Z/quick-links.png" alt="Quick Links.png" height="454" width="1216" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><strong>📝 NOTE</strong>: The user-based content items display <em>counts</em>. If a user doesn't have any drafts or bookmarks, for example, the count still displays, but as <strong>0</strong>.</p><div class="embedExternal embedImage display-medium float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/19OOLLFUMHJO/quick-links-counts.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/19OOLLFUMHJO/quick-links-counts.png" alt="Quick Links-counts.png" height="372" width="336" loading="lazy" data-display-size="medium" data-float="none"></img></a> </div> </div> <p>Read on to learn how to <strong>customize the Quick Links menu</strong>. You can:</p><ul><li><strong>configure the appearance</strong> of the Quick Links menu and</li><li><strong>choose and customize the links</strong> that populate it.</li></ul><p>✔️ <strong>TIP</strong>: Be sure to test these changes on your <a href="https://success.vanillaforums.com/kb/articles/65" rel="nofollow noreferrer ugc">staging site</a> before committing them to your production site.</p><h2 data-id="quick-links-menu-in-theme-editor">Quick Links menu in Theme Editor</h2><p>The Quick Links menu is a <em>default </em>feature of the Foundation theme. The feature can also be used with your custom themes and Vanilla's "legacy" themes (e.g., Bootstrap3, Deflector, and Keystone ) as part of <a href="https://success.vanillaforums.com/kb/articles/400-vanilla-labs" rel="nofollow noreferrer ugc">Vanilla Labs</a>.</p><p>Regardless of which theme you use, the Quick Links menu is managed in Theme Editor, where you can:</p><ul><li>choose whether to <em>display borders and separators</em>,</li><li>select which <em>links to include</em>, and</li><li>set the <em>link font color</em>.</li></ul><h3 data-id="access-theme-editor">Access Theme Editor</h3><p>1. Access the Dashboard.</p><p>2. Navigate the appropriate path for your theme.</p><ul><li>Foundation theme: <strong>Appearance > Style Guides > Copy</strong>.</li><li>Custom and legacy themes: <strong>Appearance > Layouts ></strong> [<em>select_page</em>] <strong>> Edit</strong> [<em>current_page</em>] <strong>> Copy</strong>.</li></ul><p>3. In the right panel, click <strong>Global Styles</strong> and select <strong>Quick Links</strong>.</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/MUS9CRR36YUS/themeeditor-ql-option.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/MUS9CRR36YUS/themeeditor-ql-option.png" alt="ThemeEditor-QL option.png" height="478" width="1146" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>The Quick Links config panel displays:</p><div class="embedExternal embedImage display-medium float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/9BSTKCTKXGLL/themeeditor-ql-config-sections.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/9BSTKCTKXGLL/themeeditor-ql-config-sections.png" alt="ThemeEditor-QL config sections.png" height="352" width="376" loading="lazy" data-display-size="medium" data-float="none"></img></a> </div> </div> <p>Work through the remaining sections to customize the Quick Links menu to suit your community.</p><h2 data-id="theme-editor-options">Theme Editor options</h2><p>As you customize your Quick Links menu in Theme Editor, note these caveats regarding the <strong>undo</strong> and <strong>save</strong> options -- and how they impact one another.</p><h3 data-id="undo">Undo</h3><p>The <strong>List Divider Style</strong>, <strong>Border Style</strong>, and <strong>Link Color</strong> settings each display an "undo" icon <em>whenever the previously saved value is changed</em>.</p><div class="embedExternal embedImage display-medium float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/TEMOW9FJWYX2/themeeditor-ql-3-undos.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/TEMOW9FJWYX2/themeeditor-ql-3-undos.png" alt="ThemeEditor-QL 3 Undos.png" height="343" width="377" loading="lazy" data-display-size="medium" data-float="none"></img></a> </div> </div> <ul><li>Click the icon to revert to the <em>previously saved value</em>.</li></ul><p>The "undo" icon displays until <strong>Save</strong> (in the upper right of the editor) is clicked.</p><h3 data-id="save">Save</h3><p>Even though there are only a few configuration options for Quick Links, it's still a good idea to periodically save your changes as you work and try different display settings.</p><p>The <strong>Save</strong> option is in the upper right of Theme Editor.</p><p>When you click <strong>Save</strong>:</p><ul><li>the <em>page refreshes</em>,</li><li>your <em>changes are saved</em>,</li><li>your <em>changes are immediately applied</em> to the Quick Links menu, and</li><li>the "undo" icon <em>no longer displays</em>; it reappears when you change settings.</li></ul><p>✔️ <strong>TIP</strong>: You can make changes in Quick Links and then navigate to another section in Theme Editor, such as <strong>Global Styles</strong>, and change some of its settings; then -- as long as you have not clicked <strong>Save</strong> -- when you return to Quick Links, the (unsaved) changes can still be reverted via the "undo" icon. <em>This is very convenient if you want to compare, for example, various text and background colors with one another</em>.</p><h2 data-id="list-divider">List Divider</h2><p>Use the <strong>List Divider Style</strong> setting if you want to add some "padding" between the links.</p><ul><li>You can leave the default (<strong>No Separation</strong>) or apply either a <strong>Bordered</strong> or <strong>Separator</strong> setting as shown below.</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/GREFUYWDVFCW/themeeditor-ql-divider-0-all-three.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/GREFUYWDVFCW/themeeditor-ql-divider-0-all-three.png" alt="ThemeEditor-QL-Divider-0-All Three.png" height="489" width="985" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="container-border">Container Border</h2><p>Use the <strong>Border Style </strong>setting if you want to enclose the list of links.</p><ul><li>You can leave the default (<strong>Borderless</strong>) or apply either a <strong>Bordered</strong> or <strong>Shadow</strong> setting as shown below.</li></ul><p>📝 <strong>NOTE</strong>: The Bordered and Shadow options are very similar, but the Shadow is lighter and more difficult to see against some backgrounds.</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/VSY36JYYGBY7/themeeditor-ql-container-0-all-three.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/VSY36JYYGBY7/themeeditor-ql-container-0-all-three.png" alt="ThemeEditor-QL-Container-0-All Three.png" height="450" width="1005" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="customize-your-quick-links">Customize your Quick Links</h2><p>The <strong>Text</strong> section has two settings that you can use to make the Quick Links menu reflect your brand's aesthetic.</p><h3 data-id="link-text-color">Link text color</h3><p>Use the <strong>Link Color </strong>setting to set a color (such as your brand color) for the <em>text of the Quick Links menu links</em>.</p><div class="embedExternal embedImage display-medium float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/XU4AGVD9RN7P/themeeditor-ql-text-color.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/XU4AGVD9RN7P/themeeditor-ql-text-color.png" alt="ThemeEditor-QL-Text color.png" height="518" width="378" loading="lazy" data-display-size="medium" data-float="none"></img></a> </div> </div> <ul><li>If you know the <strong>HEX code</strong> of your preferred color, you can enter it in the text field; otherwise,</li><li>Click the <strong>color sample box</strong> to open the color picker and set a color by using the color bar and/or color ring.</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/S2HFLC6US1O6/themeeditor-ql-text-color-applied.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/S2HFLC6US1O6/themeeditor-ql-text-color-applied.png" alt="ThemeEditor-QL-Text color applied.png" height="328" width="661" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>The color you set is applied to <em>only the text</em> of the Quick Links, as shown above. If a color is not set, the text of the Quick Links inherits the color of <strong>Global Styles > Body > Text</strong>.</p><p>📝 <strong>NOTE</strong>: The title and the counts have the same color, which is inherited from <strong>Global Styles > Body > Text</strong>. These two elements are <strong>not</strong> controlled by this setting.</p><h3 data-id="show-hide-edit-add-and-arrange-links">Show, hide, edit, add, and arrange links</h3><p>The <strong>Quick Links List</strong> setting is your "master control" for <em>which links display</em> and <em>what they are labeled</em>. This is also how you add custom links (to an external "sister" site, for example).</p><p>1. Click <strong>Edit</strong> to open the Quick Links dialog.</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/48GY3RHLTP7W/themeeditor-ql-edit-overlay.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/48GY3RHLTP7W/themeeditor-ql-edit-overlay.png" alt="ThemeEditor-QL-Edit-overlay.png" height="635" width="1201" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>2. Hover on a link to manage it as described below.</p><p>3. Click <strong>Apply</strong> to save any changes you make.</p><h4 data-id="edit-links">Edit links</h4><p>The label of all the links can be edited.</p><ol><li>Hover on a link and click <strong>Edit</strong>.</li><li>Edit the label (only) and click <strong>Apply</strong>.</li></ol><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/Z5E7H5ZH5G6V/themeeditor-ql-edit-edit-hide.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/Z5E7H5ZH5G6V/themeeditor-ql-edit-edit-hide.png" alt="ThemeEditor-QL-Edit-edit_hide.png" height="238" width="714" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>📝 <strong>NOTE</strong>: The relative paths (e.g., <strong>/discussions</strong>, <strong>/discussions/mine</strong>, and <strong>/discussions/unanswered</strong>) of the default community links <strong>cannot</strong> be edited. You can hide an unwanted link and then add a link with a preferred URL (or relative path) as its "replacement."</p><h4 data-id="hide-links">Hide links</h4><p>All links can be hidden.</p><ol><li>Hover on a link and click <strong>Hide</strong>.</li></ol><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/3U1VV9N3W5I1/themeeditor-ql-edit-edit-hide.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/3U1VV9N3W5I1/themeeditor-ql-edit-edit-hide.png" alt="ThemeEditor-QL-Edit-edit_hide.png" height="238" width="714" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>Hidden links remain in this list but are grayed out; they do <strong>not</strong> display in the Quick Links menu on your community pages.</p><h4 data-id="show-links">Show links</h4><p>Hidden links are grayed out but can easily be surfaced.</p><ol><li>Hover on a hidden link and click <strong>Show</strong>.</li></ol><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/QIOUPQXYIA4Q/themeeditor-ql-edit-show.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/QIOUPQXYIA4Q/themeeditor-ql-edit-show.png" alt="ThemeEditor-QL-Edit-show.png" height="320" width="715" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>The link displays in the Quick Links menu on your community pages.</p><h4 data-id="add-links">Add links</h4><p>You can add your own links to other community pages and to simplify access to trusted external sites.</p><p>1. Click <strong>New Link</strong> in the upper right.</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/0O2E5CVNDLKY/themeeditor-ql-edit-new-link.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/0O2E5CVNDLKY/themeeditor-ql-edit-new-link.png" alt="ThemeEditor-QL-Edit-new link.png" height="374" width="715" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>2. In the new row that appears at the bottom of the list, specify:</p><ul><li>a label for the link and</li><li>a URL or relative path (to an internal community page).</li></ul><p>📝 <strong>NOTE</strong>: Be sure to specify the protocol (e.g., <strong>https:</strong>, <strong>http:</strong>) for external links.</p><p>3. Click <strong>Apply</strong>.</p><h4 data-id="arrange-links">Arrange links</h4><p>You can customize the order in which your Quick Links display on community pages.</p><p>1. Click and hold a link.</p><p>2. Drag it to a new location in the list and "drop" it into place.</p><p>3. Repeat as necessary to achieve the order you want; click <strong>Apply</strong>.</p><p>📝 <strong>NOTE</strong>: You <strong>cannot</strong> "nest" (make one be <em>sub</em> to another) Quick Links.</p><p><strong>Theme Variables in Advanced Settings</strong></p><p>You can use Vanilla's <em>Theme Variables</em> to apply even more granular customizations to the Quick Links menu. Some of the additional customizations are:</p><ul><li>Add a background color or image (<code class="code codeInline" spellcheck="false" tabindex="0">quickLinks.box.background</code>)</li><li>Adjust the spacing and padding (<code class="code codeInline" spellcheck="false" tabindex="0">quickLinks.box.spacing</code>)</li><li>Apply text colors for different states, such as hover, focus, and click (<code class="code codeInline" spellcheck="false" tabindex="0">quickLinks.listItem.fontState</code>)</li><li>Customize font properties, such as alignment, letter spacing, line height, and text decoration (<code class="code codeInline" spellcheck="false" tabindex="0">quickLinks.listItem.font</code>)</li></ul><p>To learn more about using variables to customize your Quick Links menu, see:</p><div class="js-embed embedResponsive" data-embedjson="{"body":"This article documents the variables that can be used to customize your theme. Specify these variables in the Advanced Settings panel of the Theme Editor. To access the panel, click Advanced Settings, as shown below. (The button always displays, irrespective of which section is being customized.) The Advanced Settings…","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/370-theme-variable-reference#quicklinks","embedType":"link","name":"Theme Variable Reference - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#quicklinks" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#quicklinks </a> </div><p><br></p> </article> </main>