Navigational components for your Ember app
This addon requires on Ember CLI TED Bootstrap and Ember CLI Sass, so make sure to install those first.
Then, install this addon using
ember install ember-ted-navs
Finally, import the styles into your app.scss:
// app.scss @import 'ember-ted-navs/styles';
Here's a demo of the navigation elements working together:
And the associated code:
{{!-- application.hbs --}}
{{ted-navbar name='My App'}}
<div class="container">
{{#ted-nav}}
{{#ted-nav-item 'home'}}
Home
{{/ted-nav-item}}
{{ted-nav-item 'TED Talks' 'talks'}}
{{ted-nav-item 'Users' 'users'}}
{{ted-nav-item 'Conferences' 'conferences'}}
{{#ted-nav-item right=true onClick=(action 'applicationAction')}}
<i class="fa fa-gear"></i>
{{/ted-nav-item}}
{{/ted-nav}}
{{outlet}}
</div>
{{!-- talks.hbs --}}
{{#ted-subnav}}
{{ted-subnav-item 'Talks' 'talks.index'}}
{{#ted-subnav-item 'talks.new'}}
<i class='fa fa-plus-circle'></i> Add new
{{/ted-subnav-item}}
{{#ted-subnav-item onClick=(action 'localAction') right=true}}
<i class='fa fa-plus'></i> New transfer
{{/ted-subnav-item}}
{{/ted-subnav}}
{{outlet}}
An application-wide header:
Accepts a block for further customization, for example additional Bootstrap navbar components:
Example
{{#ted-navbar name='My App'}}
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
{{/ted-navbar}}
Primary navigation element, typically used for an application's main routes:
Example
{{#ted-nav}}
{{ted-nav-item 'Home' 'home'}}
{{ted-nav-item 'TED Talks' 'talks'}}
{{ted-nav-item 'Users' 'users'}}
{{ted-nav-item 'Conferences' 'conferences'}}
{{/ted-nav}}
Each <ted-nav-item> has the same api as Ember's {{link-to}}
. The blockless form takes two positional parameters, label
followed by route
. It also accepts a block with a single positional param for route
, yielding to the block for the label:
Example
{{#ted-nav}}
{{#ted-nav-item 'home'}}
<i class='fa fa-home'></i> Welcome home!
{{/ted-nav-item}}
{{ted-nav-item 'TED Talks' 'talks'}}
{{ted-nav-item 'Users' 'users'}}
{{ted-nav-item 'Conferences' 'conferences'}}
{{/ted-nav}}
Additionally you can use a ted-nav-item to initiate an action, instead of link to a route, by passing an onClick
handler to it. In this case, you can pass a single positional param as the label, or pass a block:
Example
{{#ted-nav}}
{{ted-nav-item 'Do it to it' onClick=(action (mut someVar))}}
{{#ted-nav-item right=true onClick=(action (mut someVar))}}
<i class='fa fa-plus'></i> Add transfer
{{/ted-nav-item}}
{{/ted-nav}}
Secondary navigation element, used for child routes or route-specific actions.
Example
{{#ted-subnav}}
{{ted-subnav-item 'All talks' 'talks.index'}}
{{ted-subnav-item 'New talk' 'talks.new'}}
{{/ted-subnav}}
<ted-subnav-item> has exactly the same api as ted-nav-item, so you can use it for navigation or actions, and it accepts a block:
Example
{{#ted-subnav}}
{{ted-subnav-item 'All talks' 'talks.index'}}
{{#ted-subnav-item 'talks.new'}}
<i class='fa fa-star'></i> New talk
{{/ted-subnav-item}}
{{#ted-subnav-item right=true onClick=(action (mut somethingElse))}}
<i class='fa fa-thumbs-up'></i> Hack the planet
{{/ted-subnav-item}}
{{/ted-subnav}}
Finally, when used in combination with <ted-nav>, <ted-subnav< will animate open and closed, when navigating between routes that do and don't have a subnav. Note that going from one route with a subnav to another will not trigger animation.
See the demo at the top for an example of this.