The Style Guide is the portal to many users visiting your brand. Enabling quick and seamless access to documents, libraries, or any other piece of information is vital to the user experience and brand image. The navigation is key to an intuitive and straightforward user experience, directing them to all the documents and external links you want them to have, without hassle.
This article will show you how to set up your different navigations and external links.
About the Style Guide Navigation
Your Style Guide is equipped with two sets of navigations:
The Top Navigation shows your various Style Guides documents and Navigation links.
The Side document Navigation shows the content of the pages and categories within your documents.
For companies that have extensive brand material and content, or multiple Style Guides per brand, the top navigation can act as direct access to your range of Style Guides, documents, and other vital resources. This organization will assure you quick and easy access to the critical information your users need right away.
Manage Your Top Navigation
When you create a new Style Guide, the automatic top navigation starting point is the name you had chosen for your Style Guide – which you can of course change.
The Top Navigation can be easily managed from the edit mode. You can enter this state through a keyboard shortcut (cmd-e) and then select the cogwheel icon at the top right-hand side of the screen and on the navigation.
A window will pop up with the Navigation management, allowing you to begin adding and editing direct links to things like your Guideline documents, Libraries, and other navigation points.
In the “Manage Navigation” window you can:
Group documents together.
Create Navigation links to other brand Style Guides and external portals, like your company intranet or wikis.
Rearrange documents and document groups.
1. Create Documents
2. Create Document Groups
With this option, you can group multiple sets of items that would otherwise cramp up your navigation. Some examples might include Libraries, or documents that are sorted in a particular category, that are simply easier to access and search through in clusters.
Once you’ve created the group in the Navigation settings, you can drag and drop from the different items within the Navigation Manager. A small usability feature that makes this setup that much nicer.
3. Create Navigation Links
The advantage of having a navigation links option is that you can link to other Style Guides within Frontify and/or external systems your brand and business might use, like a wiki or intranet.
If you have other Style Guides you’d like to include in the navigation, simply copy the link for that Style guide and add it like so:
If you're linking an internal page, we recommend only using the URL piece after your company's Frontify URL (e.g. /hub/14 instead of https://company.frontify.com/hub/14). This, to avoid redoing the internal link in case of a domain change.
It’s important for users to have access to several areas of your brand; this includes external links to content that might live outside of your Frontify environment. Linking to those pages from the top navigation will ensure they are still very much a part of your brand structure, where you can still keep everything in one place.
Customize External Link
Open the main navigation settings in the Style Guide. Click on the settings of an external navigation link where you will find all the information for that link.
You'll now see advanced settings allowing you to either upload or choose an icon from any of your libraries.
You can select if you would like the navigation link to have:
Just an icon
Or Text and Icon only
You have also the option to upload an icon or choose it from your Icon library.
Furthermore, you can customize the type and alignment of how the icon is shown. to the left or right of the text.
Having a result like this:
4. Order Navigation
Once you’ve created all the documents, groups, or navigation links – everything you need in that top navigation – it’s time to get organized. Within the Navigation manager, you can drag items by selecting the from the icon on the left of the item, and moving into the order you’d it to land in the navigation itself.
Manage your Side Navigation
Pages and Categories Navigation
The Side Navigation is to direct users into the Style Guide document pages.
Once you’ve set up the pages and the categories in your Style Guide document, jump into the edit mode on the Power Bar. Now, you’ll be able to hover over each item and move them independently up and down the side navigation with a basic drag and drop action.
You can also delete the different items, and add pages directly there by clicking on “Add Page” at the end of each section, or choosing “Delete” when you see this appear next to a page.
There are to view options for this navigation: static and collapsed. Over in the Power Bar, you can access this setting by selecting the cogwheel icon followed by “Navigation,” a set of options will appear. You can choose to toggle on/off whether the navigation is static or collapsible.
That should be everything you need to know about the Style Guide Navigation. If you have any questions or want a little help with a walkthrough, don’t hesitate to reach out and we’ll be happy to help.