diff --git a/_docs/05-configuration.md b/_docs/05-configuration.md index a5438c44..332962a1 100644 --- a/_docs/05-configuration.md +++ b/_docs/05-configuration.md @@ -97,7 +97,7 @@ header: Enable breadcrumb links to help visitors better navigate deeply structure sites. Because of the fragile method of implementing them they don't always produce accurate links reliably. For best results: 1. Use a category based permalink structure e.g. `permalink: /:categories/:title/` -2. Manually create pages for each category or use a plugin like Jekyll Archive to auto-generate. If these pages don't exist breadcrumb links to them will be broken. +2. Manually create pages for each category or use a plugin like [jekyll-archives][jekyll-archives] to auto-generate them. If these pages don't exist breadcrumb links to them will be broken. ![breadcrumb navigation example]({{ base_path }}/images/mm-breadcrumbs-example.jpg) diff --git a/_docs/06-navigation.md b/_docs/06-navigation.md new file mode 100644 index 00000000..369553c7 --- /dev/null +++ b/_docs/06-navigation.md @@ -0,0 +1,74 @@ +--- +title: "Navigation" +permalink: /docs/navigation/ +excerpt: +sidebar: + title: "v3.0" + nav: docs +--- + +{% include base_path %} + +## Masthead + +The masthead links use a "priority plus" design pattern. Meaning, show as many navigation items that will fit horizontally with a toggle to reveal the rest. + +To define these links add titles and URLs under the `main` key in `_data/navigation.yml`: + +```yaml +main: + - title: "Quick-Start Guide" + url: /docs/quick-start-guide/ + + - title: "Posts" + url: /year-archive/ + + - title: "Categories" + url: /categories/ + + - title: "Tags" + url: /tags/ + + - title: "Pages" + url: /page-archive/ + + - title: "Collections" + url: /collection-archive/ + + - title: "External Link" + url: https://google.com +``` + +Which will give you a responsive masthead similar to this: + +![priority plus masthead animation]({{ base_path }}/images/mm-priority-plus-masthead.gif) + +**ProTip:** Put the most important links first so they're always visible and not hidden behind the **menu toggle**. +{: .notice--info} + +## Breadcrumbs (Beta) + +Enable breadcrumb links to help visitors better navigate deeply structure sites. Because of the fragile method of implementing them they don't always produce accurate links reliably. For best results: + +1. Use a category based permalink structure e.g. `permalink: /:categories/:title/` +2. Manually create pages for each category or use a plugin like [jekyll-archives](https://github.com/jekyll/jekyll-archives) to auto-generate them. If these pages don't exist breadcrumb links to them will be broken. + +![breadcrumb navigation example]({{ base_path }}/images/mm-breadcrumbs-example.jpg) + +```yaml +breadcrumbs: true # disabled by default +``` + +Breadcrumb start link text and separator character can both be changed in `_data/ui-text.yml`. + +```yaml +breadcrumb_home_label : "Home" +breadcrumb_separator : "/" +``` + +For breadcrumbs that resemble something like `Start > Blog > My Awesome Post` you'd apply these settings: + +```yaml +breadcrumb_home_label : "Start" +breadcrumb_separator : ">" +``` \ No newline at end of file diff --git a/images/mm-priority-plus-masthead.gif b/images/mm-priority-plus-masthead.gif new file mode 100644 index 00000000..85c73c47 Binary files /dev/null and b/images/mm-priority-plus-masthead.gif differ