To help readers navigate a Project, links to some or all of its stories can be shown in the Project header and/or footer.
These navigation sections will be automatically generated and updated when you add, move, or remove any story in your project (ensuring it’s always up-to-date), or you can manually choose which stories and content groups to expose in the navigation, or you can create links to outside of the Project.
Project navigation vs. section navigation
There are two different types of navigation you can have in projects:
Project navigation - the default, auto-generated navigation links between different stories within a Project, or any custom navigation links that you add from the Project Navigation settings
Section navigation - in-story navigation that can be enabled in individual stories to link to different sections of the story.
The Project navigation can show up to two levels of navigation items - the second level will render as nested sub-nav items of the first. By default, the top-two levels of stories within the Project hierarchy will be added, but if you wish to add a link to the Project navigation for a story that is further down in the Project hierarchy you can enable the Edit Navigation toggle (see section below) and manually add it.
Example of Project navigation layout on larger screens
Example of Project navigation layout on smaller screens
Project Navigation Editor
Project navigation editor
You can edit the format of the header and footer navigation sections in the Navigation tab of the project settings, including:
Background colour and text colour based on your Project theme colour palette, or a custom colour.
The navigation type:
Within Header - This is the default option that displays the Project navigation within the header on larger screens, and changes to a hamburger menu on smaller screens.
Hamburger Nav - The navigation shows within a hamburger menu (three horizontal lines as an icon which can be clicked to show the full navigation menu) at all screen widths
None - no project navigation at any screen width
An option to include in-story section navigation links within the burger navigation (for stories that contain their own section navigation).
Edit Navigation - Enabling this toggle will remove the automatically generated Project navigation (the grouping and contents will be based on the hierarchy of your project) and allow you to manually curate them by adding custom links (e.g. external links, links to deeply nested stories) and text, or add Navigation Groups that exist in the Project hierarchy (see below for more on Navigation Groups)
Once you've toggled Edit Navigation on, press the (+) button to see the available options. Note that you must select the Within Header navigation type in order to edit the navigation items, and if you wish to use the hamburger nav you can enable it after you've edited the nav items.
Enable social sharing icons.
Add a simple search option, allowing users to search the contents of all stories in the project. Project search is available only on some Shorthand plans. To discuss adding this feature, please get in touch.
Example of Project search
Navigation Groups
When adding items to the Project structure, one option is a Navigation Group.
A navigation group is essentially like a folder—a group of related stories that don’t have an associated landing page.
In the example above, the navigation group called “Our Team” has 4 child stories (Amanda, Roger, Susan, Phil), but there is no story called “Our Team”. Within the Project navigation, the text "Our Team" will appear as a drop-down menu, from which readers can choose any of the stories contained in the group, just like any nested child stories of the top-level navigation items, however "Our Team" will not be linked.
Note: By default, navigation groups will only show in the navigation bar when the group is at the top-level of your Project hierarchy. If you add a group lower in the hierarchy, it will only be included in the navigation bar if you toggle on EDIT NAVIGATION under the Project Navigation settings and manually add it.
Related Stories sections
Aside from the standard navigation in the header and footer, Related Stories sections are a convenient way to add links between stories in a Project or to external pages. These links are rendered as cards or lists within the body of your story rather than in a navigation bar or menu, and similarly to the header/footer navigation, the links are automatically generated by default based on the project structure.