2d:null 2e:["$","title",null,{"children":"Horizontal navigation menu | Cobus Theunissen | Observable"}] 33:T7dc,function horizontalNav(theme) { theme = theme || {}; theme.backgroundColor = theme.backgroundColor || "#f3f3f3"; theme.border = theme.border || "1px solid #e7e7e7"; theme.textColor = theme.textColor || "#666"; theme.fontFamily = theme.fontFamily || "sans-serif"; theme.fontWeight = theme.fontWeight || 500; theme.backgroundHover = theme.backgroundHover || "#e7e7e7"; theme.backgroundActive = theme.backgroundActive ||"#4CAF50"; theme.fontWeightActive = theme.fontWeightActive || 700; theme.textColorActive = theme.textColorActive || "white"; theme.fontSize = theme.fontSize || "14px"; let nav = ` ` nav += `" return html`${nav}` }34:[] 31:{"id":"3821f221de888dbd","slug":"horizontal-navigation-menu","title":"Horizontal navigation menu","thumbnail":"ba961edb96ebbe3be548852750b26a7053f1b75f55e4599287ae1151c87a7570","access_level":"public","create_time":"$D2021-01-04T22:10:49.976Z","update_time":"$D2021-01-06T22:39:06.160Z","view_time":null,"first_public_time":"$D2021-01-04T23:51:11.116Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"5097ed23e9872f77","login":"cobus","name":"Cobus Theunissen","avatar_url":"https://avatars-next.observableusercontent.com/4a17a065d7a0f5f9a64a852f7b26a4f875c2ff69eb17264c3bd9f81e69285c05","tier":"starter_2024"},"version":543,"publish_version":543,"role":null,"authored":false,"authors":[{"type":"individual","id":"c1daf2951ad616fb","login":"cobus","name":"Cobus Theunissen","avatar_url":"https://avatars-next.observableusercontent.com/4a17a065d7a0f5f9a64a852f7b26a4f875c2ff69eb17264c3bd9f81e69285c05","tier":null}],"members":[{"type":"individual","id":"c1daf2951ad616fb","login":"cobus","name":"Cobus Theunissen","avatar_url":"https://avatars-next.observableusercontent.com/4a17a065d7a0f5f9a64a852f7b26a4f875c2ff69eb17264c3bd9f81e69285c05","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"20b749552ba94163","slug":"tools","title":"Tools","owner":{"id":"5097ed23e9872f77","login":"cobus","name":"Cobus Theunissen"}},"type":"notebook","body":{"title":"Horizontal navigation menu","cells":[{"id":0,"value":"md`# Horizontal navigation menu`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"horizontalNav()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"links = [\n {href: \"https://observablehq.com/@cobus/horizontal-navigation-menu\", title: \"Home\"},\n {href: \"https://observablehq.com/@cobus/horizontal-navigation-menu?a\", title: \"News\", style: \"\"},\n {href: \"https://observablehq.com/@cobus/horizontal-navigation-menu?b\", title: \"Contact\", style: \"\"},\n {href: \"https://observablehq.com/@cobus/horizontal-navigation-menu?c\", title: \"About\", style: \"float:right\"}\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"md`## Instructions\n\nYou can create a horizontal menu on a group of notebooks to make it feel like an application. To use it on a page, you should import \\`horizontalNav\\` from this page:\n\n\\`\\`\\`js\nimport {horizontalNav} with {links} from \"@cobus/horizontal-navigation-menu\"\n\\`\\`\\`\n\nand then set up your links like so:\n\\`\\`\\`js\nlinks = [\n {href: \"https://observablehq.com/@cobus/horizontal-navigation-menu\", title: \"Home\"},\n {href: \"https://observablehq.com/@cobus/horizontal-navigation-menu?a\", title: \"News\", style: \"\"},\n {href: \"https://observablehq.com/@cobus/horizontal-navigation-menu?b\", title: \"Contact\", style: \"\"},\n {href: \"https://observablehq.com/@cobus/horizontal-navigation-menu?c\", title: \"About\", style: \"float:right\"}\n]\n\\`\\`\\`\n\nand then call the function horizontalNav with any theme styles you would like to override, like this:\n\n\\`\\`\\`js\nhorizontalNav({\n fontFamily: \"Tahoma, sans-serif\",\n backgroundActive: \"darkblue\",\n fontWeightActive: \"600\",\n })\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"