<commit_before>---
currentMenu: getting-started
---

# Getting Started

Install, include, configure.

## Install (via bower)
```
bower install eeh-navigation
```

## Include CSS
```
<link rel="stylesheet" href="bower_components/eeh-navigation/dist/eeh-navigation.css"/>
```

## Include JavaScript
```
    <script src="bower_components/eeh-navigation/dist/eeh-navigation.js"></script>
    <script src="bower_components/eeh-navigation/dist/eeh-navigation.tpl.js"></script>
```

## Configuration Example
```
angular.module('myApp', ['eehNavigation']).config(['eehNavigationProvider',
function (eehNavigationProvider) {
    // Configure navbar branding and the link to navigate to when clicked.
    eehNavigationProvider.navbarBrand = {
        text: 'My Product',
        href: '/home'
    };

    // Add a drowndown menu for user links to the navbar.
    eehNavigationProvider
        .navbarMenuItem('user', {
            text: 'Me',
            iconClass: 'fa-user'
        })
        .navbarMenuItem('user.profile', {
            text: 'User Profile',<commit_msg>Add eeh-navigation directive explanation in "Getting Started"<commit_after>---
currentMenu: getting-started
---

# Getting Started

Install, include, configure.

## Install (via bower)
```
bower install eeh-navigation
```

## Include CSS
```
<link rel="stylesheet" href="bower_components/eeh-navigation/dist/eeh-navigation.css"/>
```

## Include JavaScript
```
    <script src="bower_components/eeh-navigation/dist/eeh-navigation.js"></script>
    <script src="bower_components/eeh-navigation/dist/eeh-navigation.tpl.js"></script>
```

## Use the "eeh-navigation" Directive

The directive should wrap some set of nested sub controllers.

```html
<eeh-navigation>
    ... my sub controllers ...
</eeh-navigation>
```

If ui-router is used, which is recommended, then the directive should wrap a _ui-view_ directive.
It should also be in a template that is at the top of the state hierarchy.

```html
<eeh-navigation>
    <ui-view></ui-view>
</eeh-navigation>
```

## Configuration Example
```
angular.module('myApp', ['eehNavigation']).config(['eehNavigationProvider',
function (eehNavigationProvider) {
    // Configure navbar branding and the link to navigate to when clicked.
    eehNavigationProvider.navbarBrand = {
        text: 'My Product',
        href: '/home'
    };

    // Add a drowndown menu for user links to the navbar.
    eehNavigationProvider
        .navbarMenuItem('user', {
            text: 'Me',
            iconClass: 'fa-user'
        })
        .navbarMenuItem('user.profile', {
            text: 'User Profile',
{'fraction_non_alphanumeric': 0.1406069919323857, 'fraction_numerical': 0.0, 'mean_word_length': 3.3986486486486487, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 19, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '221722', 'n_tokens_mistral': 804, 'n_tokens_neox': 762, 'n_words': 196}