{"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":""}