{"category":{"version":"58c81e8e693cdd1900606acf","project":"542fe92a5eceb608003fddc8","_id":"58c81e8e693cdd1900606ad3","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2014-10-04T12:45:40.548Z","from_sync":false,"order":3,"slug":"helper-reference","title":"Helper Reference"},"parentDoc":null,"project":"542fe92a5eceb608003fddc8","user":"542c5cfcddd3190e00228849","version":{"__v":1,"_id":"58c81e8e693cdd1900606acf","project":"542fe92a5eceb608003fddc8","createdAt":"2017-03-14T16:47:10.620Z","releaseDate":"2017-03-14T16:47:10.620Z","categories":["58c81e8e693cdd1900606ad0","58c81e8e693cdd1900606ad1","58c81e8e693cdd1900606ad2","58c81e8e693cdd1900606ad3","58c81e8e693cdd1900606ad4","58c81e8e693cdd1900606ad5"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"0.11.7","version":"0.11.7"},"_id":"58c81e8e693cdd1900606af5","__v":0,"updates":["55f8348ee000ca0d00b28095"],"next":{"pages":[],"description":""},"createdAt":"2015-02-28T18:14:51.796Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":42,"body":"[block:html]\n{\n  \"html\": \"<div class=\\\"github-deeplinks\\\">\\n    <a href=\\\"https://github.com/TryGhost/Ghost/blob/0.10.0/core/server/helpers/navigation.js\\\"><i class=\\\"fa fa-github-alt fa-right\\\"></i>Source</a>\\n    <a href=\\\"https://github.com/TryGhost/Ghost/blob/0.10.0/core/test/unit/server_helpers/navigation_spec.js\\\"><i class=\\\"fa fa-check-square-o fa-right\\\"></i>Tests</a>\\n</div>\"\n}\n[/block]\nUsage: `{{navigation}}`\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Type\",\n    \"h-1\": \"Parameters\",\n    \"h-2\": \"Attributes\",\n    \"0-0\": \"[Output](/docs/helpers#section-output), [Template-driven](/docs/helpers#section-template-driven), [Ghost](/docs/helpers#section-ghost)\",\n    \"0-1\": \"n/a\",\n    \"0-2\": \"n/a\"\n  },\n  \"cols\": 3,\n  \"rows\": 1\n}\n[/block]\n### Description\n\n`{{navigation}}` is a  [template-driven](/docs/helpers#section-template-driven) helper which outputs formatted HTML of menu items defined in the Ghost admin panel (Settings > Navigation). By default, the navigation is marked up using a [preset template](https://github.com/TryGhost/Ghost/blob/0.7.0/core/server/helpers/tpl/navigation.hbs).\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!-- First, include navigation where you want it to appear -->\\n{{navigation}}\",\n      \"language\": \"handlebars\",\n      \"name\": \"header.hbs\"\n    }\n  ]\n}\n[/block]\n**Note:** If there are no navigation items defined in the admin panel, this helper will output nothing. By default, navigation in the admin panel provides a 'home' link.\n\n### Default template\n\nBy default, the HTML output by including `{{navigation}}` in your theme, looks like the following:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!-- Default navigation template html -->\\n<ul class=\\\"nav\\\">\\n    <li class=\\\"nav-home nav-current\\\"><a href=\\\"/\\\">Home</a></li>\\n    <li class=\\\"nav-about\\\"><a href=\\\"/about\\\">About</a></li>\\n    <li class=\\\"nav-contact\\\"><a href=\\\"/contact\\\">Contact</a></li>\\n    ...\\n</ul>\",\n      \"language\": \"html\",\n      \"name\": null\n    },\n    {\n      \"code\": \"<!-- Default navigation template handlebars -->\\n<ul class=\\\"nav\\\">\\n    {{#foreach navigation}}\\n    <li class=\\\"nav-{{slug}}{{#if current}} nav-current{{/if}}\\\" role=\\\"presentation\\\"><a href=\\\"{{url absolute=\\\"true\\\"}}\\\">{{label}}</a></li>\\n    {{/foreach}}\\n</ul>\",\n      \"language\": \"handlebars\"\n    }\n  ]\n}\n[/block]\n### Changing The Template\n\nIf you want to modify the default markup of the navigation helper, this can be achieved by creating a new file at `./partials/navigation.hbs`. If this file exists, Ghost will load it instead of the default template. Example:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div class=\\\"my-fancy-nav-wrapper\\\">\\n    <ul class=\\\"nav\\\">\\n        <!-- Loop through the navigation items -->\\n        {{#foreach navigation}}\\n        <li class=\\\"nav-{{slug}}{{#if current}} nav-current{{/if}}\\\"><a href=\\\"{{url absolute=\\\"true\\\"}}\\\">{{label}}</a></li>\\n        {{/foreach}}\\n        <!-- End the loop -->\\n    </ul>\\n</div>\",\n      \"language\": \"html\",\n      \"name\": \"./partials/navigation.hbs\"\n    }\n  ]\n}\n[/block]\n### List of Attributes\n\nA navigation item has the following attributes which can be used inside your `./partials/navigation.hbs` template file...\n\n* **{{label}}** - The text to display for the link\n* **{{url}}** - The URL to link to - see the [url helper](doc:url) for more options\n* **{{current}}** - Boolean true / false - whether the URL matches the current page\n* **{{slug}** - Slugified name of the page, eg `about-us`. Can be used as a class to target specific menu items with CSS or jQuery.\n\nThese attributes can only be used inside the `{{#foreach navigation}}` loop inside `./partials/navigation.hbs`. A navigation loop will not work in other partial templates or theme files.\n\n### Examples\n\nThe navigation helper doesn't output anything if there are no navigation items to output, so there's no need to wrap it in an `{{#if}}` statement to prevent an empty list. However it's a common pattern, as in Casper, to want to output a link to open the main menu, but only if there are items to show.\n\nThe data used by the `{{navigation}}` helper is also stored as a global variable called `:::at:::blog.navigation`. You can use this global variable in any theme file to check if navigation items have been added by a user in the Ghost admin panel.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{{#if @blog.navigation}}\\n    <a class=\\\"menu-button\\\" href=\\\"#\\\"><span class=\\\"word\\\">Menu</span></a>\\n{{/if}}\",\n      \"language\": \"html\",\n      \"name\": \"header.hbs\"\n    }\n  ]\n}\n[/block]","excerpt":"`{{navigation}}` Helper - Output the blog's navigation items","slug":"navigation","type":"basic","title":"navigation"}

navigation

`{{navigation}}` Helper - Output the blog's navigation items

[block:html] { "html": "<div class=\"github-deeplinks\">\n <a href=\"https://github.com/TryGhost/Ghost/blob/0.10.0/core/server/helpers/navigation.js\"><i class=\"fa fa-github-alt fa-right\"></i>Source</a>\n <a href=\"https://github.com/TryGhost/Ghost/blob/0.10.0/core/test/unit/server_helpers/navigation_spec.js\"><i class=\"fa fa-check-square-o fa-right\"></i>Tests</a>\n</div>" } [/block] Usage: `{{navigation}}` [block:parameters] { "data": { "h-0": "Type", "h-1": "Parameters", "h-2": "Attributes", "0-0": "[Output](/docs/helpers#section-output), [Template-driven](/docs/helpers#section-template-driven), [Ghost](/docs/helpers#section-ghost)", "0-1": "n/a", "0-2": "n/a" }, "cols": 3, "rows": 1 } [/block] ### Description `{{navigation}}` is a [template-driven](/docs/helpers#section-template-driven) helper which outputs formatted HTML of menu items defined in the Ghost admin panel (Settings > Navigation). By default, the navigation is marked up using a [preset template](https://github.com/TryGhost/Ghost/blob/0.7.0/core/server/helpers/tpl/navigation.hbs). [block:code] { "codes": [ { "code": "<!-- First, include navigation where you want it to appear -->\n{{navigation}}", "language": "handlebars", "name": "header.hbs" } ] } [/block] **Note:** If there are no navigation items defined in the admin panel, this helper will output nothing. By default, navigation in the admin panel provides a 'home' link. ### Default template By default, the HTML output by including `{{navigation}}` in your theme, looks like the following: [block:code] { "codes": [ { "code": "<!-- Default navigation template html -->\n<ul class=\"nav\">\n <li class=\"nav-home nav-current\"><a href=\"/\">Home</a></li>\n <li class=\"nav-about\"><a href=\"/about\">About</a></li>\n <li class=\"nav-contact\"><a href=\"/contact\">Contact</a></li>\n ...\n</ul>", "language": "html", "name": null }, { "code": "<!-- Default navigation template handlebars -->\n<ul class=\"nav\">\n {{#foreach navigation}}\n <li class=\"nav-{{slug}}{{#if current}} nav-current{{/if}}\" role=\"presentation\"><a href=\"{{url absolute=\"true\"}}\">{{label}}</a></li>\n {{/foreach}}\n</ul>", "language": "handlebars" } ] } [/block] ### Changing The Template If you want to modify the default markup of the navigation helper, this can be achieved by creating a new file at `./partials/navigation.hbs`. If this file exists, Ghost will load it instead of the default template. Example: [block:code] { "codes": [ { "code": "<div class=\"my-fancy-nav-wrapper\">\n <ul class=\"nav\">\n <!-- Loop through the navigation items -->\n {{#foreach navigation}}\n <li class=\"nav-{{slug}}{{#if current}} nav-current{{/if}}\"><a href=\"{{url absolute=\"true\"}}\">{{label}}</a></li>\n {{/foreach}}\n <!-- End the loop -->\n </ul>\n</div>", "language": "html", "name": "./partials/navigation.hbs" } ] } [/block] ### List of Attributes A navigation item has the following attributes which can be used inside your `./partials/navigation.hbs` template file... * **{{label}}** - The text to display for the link * **{{url}}** - The URL to link to - see the [url helper](doc:url) for more options * **{{current}}** - Boolean true / false - whether the URL matches the current page * **{{slug}** - Slugified name of the page, eg `about-us`. Can be used as a class to target specific menu items with CSS or jQuery. These attributes can only be used inside the `{{#foreach navigation}}` loop inside `./partials/navigation.hbs`. A navigation loop will not work in other partial templates or theme files. ### Examples The navigation helper doesn't output anything if there are no navigation items to output, so there's no need to wrap it in an `{{#if}}` statement to prevent an empty list. However it's a common pattern, as in Casper, to want to output a link to open the main menu, but only if there are items to show. The data used by the `{{navigation}}` helper is also stored as a global variable called `@blog.navigation`. You can use this global variable in any theme file to check if navigation items have been added by a user in the Ghost admin panel. [block:code] { "codes": [ { "code": "{{#if @blog.navigation}}\n <a class=\"menu-button\" href=\"#\"><span class=\"word\">Menu</span></a>\n{{/if}}", "language": "html", "name": "header.hbs" } ] } [/block]