ui-router-tabs 0,0,0,0 travis-ci grunt Bower karma npm

Idiot-proof tab panes with route support using Angular.js + Bootstrap 3 + UI Router

2 years after MIT

UI Router Tabs

Leverages UI Bootstrap and UI Router to give you full-strength route-driven tabs in Angular.js.

Build Status Coverage Status     Gratipay

Example / Demo


How to Install / Usage

  1. Install the plugin into your Angular.js project, manually or via bower install angular-ui-router-tabs

  2. Add ui.router.tabs as a new module dependency in your angular app.

  3. Define your routes in a hierarchy that makes sense for a tabbed layout, Eg:

      $stateProvider.state('user', {
        url:         '',
        controller: 'UserCtrl',
        templateUrl: 'example.html'
      }).state('user.settings', {
        url:         '/user/settings',
        templateUrl: 'user/settings.html'
      }).state('user.accounts', {
        url:         '/user/accounts',
        templateUrl: 'user/accounts.html'
  4. Define your tabData (or similiar variable) in the root view controller of your tabs (ie. UserCtrl in the case above) Eg:

      $scope.tabData   = [
          heading: 'Settings',
          route:   'user.settings'
          heading: 'Accounts',
          route:   'user.accounts',
          disable: true

    NOTE: You can also specify params and options to pass special parameters or options for the target route to UI Router, Eg:

        heading: 'Accounts',
        route:   'user.accounts',
        params:  {
                   accountId: account.id
        options: {}
  5. Declare the following in your the parent HTML view template <tabs data="tabData" type="tabs"></tabs>.

    Optional attributes for the <tabs> (which are passed on to the UI Bootstrap component) are:

    • type: [ 'tabs' | 'pills' ]
    • vertical: boolean
    • justified: boolean
    • class: string
    • templateUrl: <template url name>

    NOTE: If you use a custom template, you may need to define a ui-view placeholder for the child content panes in the same HTML view template eg. <ui-view></ui-view>.


  • UI Bootstrap Tabs will not select a tab by default. If you want it to, specify the target sub-route when you show the tabs (ie. link the ui-view containing the tabs with the default (first) element as the sub-route example/#/user/settings in the example.)
  • You can override the default directive template by specifying template-url="my_template.html" on the <tabs> element.
  • You can enable / disable tabs by specifying disable: true in the tabData (can be dynamically set).
  • You can use <tab-heading> in a custom directive template to add any HTML into the tab title (eg. icons)
  • You can update the tabData variable dynamically, if you want to.
  • You can move the <tabs> tag around to wherever you want the tab listing to appear. (left-positioned is the best spot to enable responsive design.).
  • Each tab will have a default class of tab, an active tab will have the active class.

Running Locally

  1. Checkout git repository locally: git clone [email protected]:rpocklin/ui-router-tabs.git
  2. npm install
  3. bower install
  4. grunt serve
  5. View http://localhost:9000/example/ in your browser to see the example.


  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Added some feature') - please consider adding tests!
  4. Push to the branch (git push origin my-new-feature)
  5. Run grunt and ensure there are no errors.
  6. Create a new Pull Request


  • 2.0.2 Fixed invalid <ui-view> placement in default template.
  • 2.0.1 Fixed invalid html in default template (missing <div>).
  • 2.0.0 Added class and template-url attributes on uib-tab and began using <uib-tab-heading> tag.
  • 1.8.0 Added inline template by default (as requested) and allowed customer classes parameter.
  • 1.7.0 Added uib prefix for UI Bootstrap elements (as per v0.14.0). See #47.
    Upgraded angular-bootstrap to v14.0.
  • 1.6.0 Renamed disabled attribute to disable in line with UI Bootstrap <tab>. See #39.
  • 1.5.1 Removed bower_components from repository. See #40.
  • 1.5.0 Bumped angular-bootstrap dependency to v0.13.0 (fixes default tab being auto-selected).
  • 1.4.3 Added handling of $stateChangeCancel, $stateChangeError and $stateNotFound to reset active tab.
  • 1.4.2 Added feature to update tabs if state change event is cancelled. See #19.
  • 1.4.1 Bumped angular-bootstrap dependency to v0.12.1.
  • 1.4.0 Removed default $state.go(..) route option, added disabled option and updated jsbeautifier. See #16.
  • 1.3.0 Improved state equality checking to include params and options.
  • 1.2.0 Prevented reload of current state again. See #11.
  • 1.1.4 Added support for strict-di mode.
  • 1.1.3 Fixed tab switching when using ngTouch. See #2.
  • 1.1.2 Added $stateChangeSuccess watcher to update parent tab(s) when using
    ui-sref or $state.go(). See #1.
  • 1.1.0 Added nested tab support (tabs within tabs)
  • 1.0.0 Initial release


Released under the MIT License. See the LICENSE file for further details.

Related Repositories



:page_facing_up: A curated list of awesome Angular 2 and Angular 4 resources by ...



:page_facing_up: A curated list of awesome Angular 2 and Angular 4 resources by ...



:cyclone: A list of awesome AngularJs services, directives, utilities and resour ...



Modern UI for Apache Cloudstack User Self Service Portal ...



AngularJS directive that provides responsive tabs with dropdown menu overflow ...

Top Contributors

rpocklin alexilyaev kravchina glsee cesarandreu stefanotorresi tlvince wesleycho tmont


package version
dev grunt ~0.4.1
grunt-autoprefixer ~0.7.3
grunt-cli ~0.1.13
grunt-contrib-connect ~0.8.0
grunt-contrib-jshint ~0.7.1
grunt-contrib-watch ~0.6.1
grunt-jsbeautifier ^0.2.10
grunt-karma ^0.12.2
grunt-karma-coveralls ~2.3.0
jshint-stylish ~0.1.3
karma ^0.13.22
karma-coverage ~0.2.4
karma-jasmine ~0.1.5
karma-ng-html2js-preprocessor ~0.1.0
karma-phantomjs-launcher ^1.0.0
load-grunt-tasks ~0.6.0
phantomjs-prebuilt ^2.1.7
static-site-generator-webpack-plugin ^2.0.1
time-grunt ~0.2.1


-   v2.0.2 zip tar
-   v2.0.1 zip tar
-   v2.0.0 zip tar
-   v1.8.0 zip tar
-   v1.7.0 zip tar
-   v1.6.0 zip tar
-   v1.5.1 zip tar
-   v1.5.0 zip tar
-   v1.4.3 zip tar
-   v1.4.2 zip tar
-   v1.4.1 zip tar
-   v1.4.0 zip tar
-   v1.3.0 zip tar
-   v1.2.0 zip tar
-   v1.1.4 zip tar
-   v1.1.3 zip tar
-   v1.1.2 zip tar
-   v1.1.0 zip tar
-   v1.0.2 zip tar
-   v1.0.1 zip tar
-   v1.0.0 zip tar
-   list zip tar