The Quick Links menu helps your community members navigate to essential parts of your community:
By default, this menu appears in your side panel on most community pages, and here we include some helpful links to things like your Categories list, your Recent Discussions page, your drafts, bookmarks, Group pages, Unanswered queue and more.
Quick Link settings and style options are available in our new Theme Editor. This editor works best with Foundation-based themes which use all editable components. The Quick Links component (edited within the Theme Editor) can also be used with any legacy Vanilla based or custom themes. Read more about this here:
Quick Links are a default part of our Foundation theme system, and can also be used with legacy themes (like Bootstrap3, Deflector & Keystone ) as part of Vanilla Labs. Legacy themes may require some tweaking and Vanilla Labs features such as Quick Links should be tested out on staging first.
Customizing Quick Links
If you are using a Foundation based theme, navigate to your dashboard, then settings, and edit your Foundation based theme.
If you are using a legacy theme, you will need to create a theme (copy) for foundation based components like Quick Links. Refer to this article on how to get started: https://success.vanillaforums.com/kb/articles/403-integrate-foundation-pages-into-your-legacy-theme
Once in the theme editor, select the “Quick Links” option from the left side panel of the Styles tab:
Next, click Edit next to Quick Links List to proceed:
Within this menu, you can hover over different links in order to edit or hide them:
Hidden links will appear greyed out within the Quick Links options UX and will not appear within the Quick Links list on your site.
To ‘unhide’ a link, hover over to reveal the Show options:
The labels of the links can all be edited by hovering over a particular link and selecting edit.
The URLs of default components cannot be edited. If you need to edit one, you will have to hide the out of the box URL link and add a new link to replace it.
Once you have made your changes, you can hit ‘Enter’ or click apply.
Once you are satisfied with your changes, hit ‘Apply’ to return to the Foundation Editor.
To add a new link, click the New Link button:
Relative paths can be used for internal pages, for example /discussions, /profile, or a full URL may be used to point to external pages. Make sure you use https: protocol for these links. e.g. https://vanillaforums.com.
Once you are satisfied with your changes, hit ‘Apply’ to return to the foundation editor.
To reorganize the order of your links, simply drag and drop them into whichever order you wish.
Nesting quick links is not a feature at this time.
Styling Quick Links
The theme editor also allows you to apply basic styling options to the Quick Links menu.
List Divider Style
Enable borders or horizontal separators for links
Use the Border Style setting to enable a border or shadow for your menu:
Link Color updates the link titles. The “Quick Links” title and the counters will be inherited from the Global Styles (need link) ‘text’ colour (the bright pink/red in the example below).
If you have a technical resource, you can also use Theme Variables to update the Quick Links theming more granularly.
Using theme variables, you can also:
- Update the background color or use an image as a background
- Update the spacing and padding
- Select a border type
- Update text colors for different states (hover, focus, click, etc)
- Font updates - alignment, color, letter spacing, line height, text shadow, size, decoration, transform, weight, etc.
- Update count colors and styles
- Update title (“QuickLinks”) font colors and styles