Skip to content

Instantly share code, notes, and snippets.

@danrichman
Forked from adammcarth/homepage.marko
Last active February 8, 2016 02:05
Show Gist options
  • Save danrichman/5837cc79a73f8e5f03dc to your computer and use it in GitHub Desktop.
Save danrichman/5837cc79a73f8e5f03dc to your computer and use it in GitHub Desktop.
Navigation bar component in Marko JS
<!-- /src/pages/homepage/homepage.marko -->
<layout-use template="../../layouts/layout.marko" navbar-current="home">
<layout-put into="body">
...
</layout-put>
</layout-use>
<!-- /src/layouts/layout.marko -->
<html>
<head>
</head>
<body>
<app-navbar current="${data.navbarCurrent}" />
<layout-placeholder name="body" />
</body>
</html>
<def function="navLink(name, title, href)">
<a href="${href}" class="{?data.current === name;current}">
${title}
</a>
</def>
<!-- /src/components/app-navbar/template.marko -->
<div id="navbar">
<p>
<invoke function="navLink" name="home" title="Home" href="/" /> |
<invoke function="navLink" name="about" title="About" href="/about" /> |
<invoke function="navLink" name="users" title="Users" href="/users" /> |
<invoke function="navLink" name="blog" title="Blog" href="/blog" /> |
<invoke function="navLink" name="contact" title="Contact" href="/contact" /> |
</p>
</div>
@danrichman
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment