{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","results":{"codes":[]},"settings":"","params":[]},"next":{"description":"","pages":[]},"title":"Custom Menus","type":"basic","slug":"custom-menus","excerpt":"","body":"You can easily add and remove menu elements throughout Telescope. Here's how. \n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Menus vs Module Zones\",\n  \"body\": \"In the context of Telescope, menus refer specifically to individual drop-down, accordion, or list menus (such as the user menu or categories menu). \\n\\nUnlike module zones like `primaryNav` or `hero`, which can contain any type of content (including menus), menus come with their own built-in markup.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Adding a Menu Item\"\n}\n[/block]\nYou can add a menu item using the `Telescope.menuItems.add` function. It takes two arguments: the **name** of the menu you want to add to, and an **object** containing one or more menu item. \n\nFor example, here's how the `telescope:users` package adds menu items to the `userMenu` menu:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Telescope.menuItems.add(\\\"userMenu\\\", [\\n  {\\n    route: function () {\\n      return Router.path('user_profile', {_idOrSlug: Meteor.user().telescope.slug});\\n    },\\n    label: 'profile',\\n    description: 'view_your_profile'\\n  },\\n  {\\n    route: 'settings',\\n    label: 'settings',\\n    description: 'settings',\\n    adminOnly: true\\n  },\\n  {\\n    route: 'signOut',\\n    label: 'sign_out',\\n    description: 'sign_out'\\n  }\\n]);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Removing a Menu Item\"\n}\n[/block]\nYou can remove a menu item with `Telescope.menus.remove`, which takes two arguments: the **name** of the menu, and the **label** of the item to remove.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Menu Items\"\n}\n[/block]\nMenu items can have the following properties:\n\n- `route`: a **string** containing the name of a route, or a **function** that returns a *path*. \n- `label`: a **string** containing the label or internationalization key for the label, or a **function** that returns a label. \n- `description`: an optional description of the menu item.\n- `itemClass`: an optional CSS class that will be applied to the item.\n- `adminOnly`: an optional boolean to indicate if the item should only be shown to admin users.\n- `template`: the name of a template. If provided, it will be used to render the item and override all other options.\n- `data`: the data context for the template, if one has been provided. \n\nThe `template` and `data` options make it possible to completely customize any specific menu item (to include a button in a menu, for example). \n\nIn your code, you can retrieve all items for a menu with `Telescope.menuItems.get`:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Telescope.menuItems.get(\\\"userMenu\\\");\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Menu Components\"\n}\n[/block]\nMenus are rendered using the **menu component** (although you won't need to worry about this if you're only adding items to existing menus). Menu components can take the following options:\n\n- `menuName`: the name of the menu.\n- `menuItems`: an array of menu item objects.\n- `menuLabel`: an optional label for the menu.\n- `menuClass`: an optional CSS class for the menu.\n- `menuCollapsed`: whether the menu should start out collapsed (for accordion menus).\n- `menuMode`: one of \"accordion\", \"dropdown\", or \"list\" (defaults to \"list\").\n\nFor example, here is how the `user` menu is called in the `user_menu` template:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{{> menuComponent menuName=\\\"user\\\" menuLabel=menuLabel menuItems=menuItems menuClass=\\\"header-submodule\\\" menuMode=menuMode menuCollapsed=true}}\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nAnd here is the accompanying helper code:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Template.user_menu.helpers({\\n  menuLabel: function () {\\n    return Users.getDisplayName(Meteor.user());\\n  },\\n  menuItems: function () {\\n    return Telescope.menuItems.get(\\\"userMenu\\\");\\n  },\\n  menuMode: function () {\\n    if (!!this.mobile) {\\n      return 'list';\\n    } else if (Settings.get('navLayout', 'top-nav') === 'top-nav') {\\n      return 'dropdown';\\n    } else {\\n      return 'accordion';\\n    }\\n  }\\n});\\n\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","updates":[],"order":21,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"5635b294d209b50d0031dfe5","category":{"sync":{"isSync":false,"url":""},"pages":["5635b294d209b50d0031dfdf","5635b294d209b50d0031dfe0","5635b294d209b50d0031dfe1","5635b294d209b50d0031dfe2","5635b294d209b50d0031dfe3","5635b294d209b50d0031dfe4","5635b294d209b50d0031dfe5","5635b294d209b50d0031dfe6","5635b294d209b50d0031dfe7","5635b294d209b50d0031dfe8","5635b294d209b50d0031dfe9","5635b294d209b50d0031dfea","5635b294d209b50d0031dfeb","5635b294d209b50d0031dfec"],"title":"Customizing Telescope","slug":"customizing-telescope","order":2,"from_sync":false,"reference":false,"_id":"5635b291d209b50d0031dfc7","createdAt":"2015-04-09T03:24:43.474Z","project":"550a7754635c660d0052808e","__v":1,"version":"5635b290d209b50d0031dfc4"},"user":"5469e5dfa3b67a0e00559b06","createdAt":"2015-05-12T00:43:02.609Z","__v":0,"version":{"version":"0.25","version_clean":"0.25.0","codename":"","is_stable":true,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["5635b291d209b50d0031dfc5","5635b291d209b50d0031dfc6","5635b291d209b50d0031dfc7","5635b291d209b50d0031dfc8","5635b291d209b50d0031dfc9","5635b291d209b50d0031dfca"],"_id":"5635b290d209b50d0031dfc4","__v":1,"createdAt":"2015-11-01T06:34:56.868Z","project":"550a7754635c660d0052808e","releaseDate":"2015-11-01T06:34:56.868Z"},"project":"550a7754635c660d0052808e","githubsync":""}

Getting Started

Using Telescope

Customizing Telescope

Internals

Case Studies

Custom Menus

You can easily add and remove menu elements throughout Telescope. Here's how. [block:callout] { "type": "info", "title": "Menus vs Module Zones", "body": "In the context of Telescope, menus refer specifically to individual drop-down, accordion, or list menus (such as the user menu or categories menu). \n\nUnlike module zones like `primaryNav` or `hero`, which can contain any type of content (including menus), menus come with their own built-in markup." } [/block] [block:api-header] { "type": "basic", "title": "Adding a Menu Item" } [/block] You can add a menu item using the `Telescope.menuItems.add` function. It takes two arguments: the **name** of the menu you want to add to, and an **object** containing one or more menu item. For example, here's how the `telescope:users` package adds menu items to the `userMenu` menu: [block:code] { "codes": [ { "code": "Telescope.menuItems.add(\"userMenu\", [\n {\n route: function () {\n return Router.path('user_profile', {_idOrSlug: Meteor.user().telescope.slug});\n },\n label: 'profile',\n description: 'view_your_profile'\n },\n {\n route: 'settings',\n label: 'settings',\n description: 'settings',\n adminOnly: true\n },\n {\n route: 'signOut',\n label: 'sign_out',\n description: 'sign_out'\n }\n]);", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Removing a Menu Item" } [/block] You can remove a menu item with `Telescope.menus.remove`, which takes two arguments: the **name** of the menu, and the **label** of the item to remove. [block:api-header] { "type": "basic", "title": "Menu Items" } [/block] Menu items can have the following properties: - `route`: a **string** containing the name of a route, or a **function** that returns a *path*. - `label`: a **string** containing the label or internationalization key for the label, or a **function** that returns a label. - `description`: an optional description of the menu item. - `itemClass`: an optional CSS class that will be applied to the item. - `adminOnly`: an optional boolean to indicate if the item should only be shown to admin users. - `template`: the name of a template. If provided, it will be used to render the item and override all other options. - `data`: the data context for the template, if one has been provided. The `template` and `data` options make it possible to completely customize any specific menu item (to include a button in a menu, for example). In your code, you can retrieve all items for a menu with `Telescope.menuItems.get`: [block:code] { "codes": [ { "code": "Telescope.menuItems.get(\"userMenu\");", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Menu Components" } [/block] Menus are rendered using the **menu component** (although you won't need to worry about this if you're only adding items to existing menus). Menu components can take the following options: - `menuName`: the name of the menu. - `menuItems`: an array of menu item objects. - `menuLabel`: an optional label for the menu. - `menuClass`: an optional CSS class for the menu. - `menuCollapsed`: whether the menu should start out collapsed (for accordion menus). - `menuMode`: one of "accordion", "dropdown", or "list" (defaults to "list"). For example, here is how the `user` menu is called in the `user_menu` template: [block:code] { "codes": [ { "code": "{{> menuComponent menuName=\"user\" menuLabel=menuLabel menuItems=menuItems menuClass=\"header-submodule\" menuMode=menuMode menuCollapsed=true}}", "language": "html" } ] } [/block] And here is the accompanying helper code: [block:code] { "codes": [ { "code": "Template.user_menu.helpers({\n menuLabel: function () {\n return Users.getDisplayName(Meteor.user());\n },\n menuItems: function () {\n return Telescope.menuItems.get(\"userMenu\");\n },\n menuMode: function () {\n if (!!this.mobile) {\n return 'list';\n } else if (Settings.get('navLayout', 'top-nav') === 'top-nav') {\n return 'dropdown';\n } else {\n return 'accordion';\n }\n }\n});\n", "language": "javascript" } ] } [/block]