# Navigation

The Purpose of the `navigation.js` file is to read whichever markdown documents contain our navigation outlines or table of contents and render them in whichever visual format is required.  

So for example, in this project we are using a `<Sidebar />` Component provided by `semantic-ui-react` and this requires us to create a nested hierarchy of `<Menu />` and `<Menu.Item />` components.

It is easy enough to take a simple markdown file and render it this way.

Additionally, there are `<Breadcrumb />` navigation elements that can be customized and the `navigation.js` file is a logical place to do this.

## Setup

To begin with, we will take the document from [src/Pages/navigation.md](doc://src/Pages/navigation.md)

```javascript
const navigationDoc = project.document('src/Pages/navigation') 
const sectionHeadings = navigationDoc.sectionHeadingNodes()
```

## Specs

### The Navigation Document Contains Top Level Sections

```javascript
const sectionTitles = sectionHeadings.map(s => s.textContent())

sectionHeadings.should.not.be.empty
sectionTitles.should.contain(
  'About', 
  'Getting Started', 
  'Project Types', 
  'Document Types'
)
```

### The Navigation Document Contains Subsections

```javascript
navigationDoc.selectNodes('heading[depth=3]').should.not.be.empty
```