> For the complete documentation index, see [llms.txt](https://ignitus-docs.gitbook.io/side-navigation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ignitus-docs.gitbook.io/side-navigation/overview/usage.md).
# Usage
## Getting Started [
](https://slackmojis.com/emojis/4225-blob-beers/download)
### Installation
Using NPM
```
$ npm install side-navigation-react
```
{% hint style="info" %}
Before installing please have a look at its [peerDependencies](https://github.com/Ignitus/Ignitus-sideNavigation/blob/master/package.json#L62).
{% endhint %}
Once you're ready please go through the component usage.
```bash
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import {
Container,
Content,
SideNavigation
} from 'react-side-navigation';
export default () => (
{/* put your content here. */}
);
```
Architecture of **navItems**.
```bash
const navItems = [
{
title: 'Item 1',
children: [
{
title: 'Item 1.1',
route: '/foo',
},
{
title: 'Item 1.2',
route: '/bar',
}
],
},
{
title: 'Item 2',
children: [
{
title: 'Item 2.1',
children: [
{
title: 'Item 2.1.1',
route: '/baz',
}
],
},
],
}
];
```
`` can be customised by passing following properties.
```bash
```
{% hint style="info" %}
All props are optional and acquire default values except `navItems`.
{% endhint %}
Fonts used in the `` can also be customised by passing **fontFace** property.
```bash
```