---
# System prepended metadata

title: Navigation and content structure | ULA
tags: [ULA-EN]

---

---
tags: ULA-EN
disqus: hackmd
title: Navigation and content structure | ULA 
description: How to organize your content to achieve particular navigation in your app
image: https://i.imgur.com/e6AxDyD.png

---

# Navigation and Content Structure 

<img src="https://i.imgur.com/hwyYflI.gif" style="float:left;margin-right:20px"/> We have various navigation types in the app.

* drawer menu 
* list of chapter subchapters
* go forward/back arrow buttons 
* auto redirect <small>(when exercises are finished)</small>

Navigation is automatically built according to the structure of the content. To be more exact, according to the headings in the text in `content.md`. 

* First level header (`# h1`) becomes a `chapter`
* Second level header (`## h2`) becomes a `subchapter`

They all have numbers according to their order in the text: `001`, `002`, ... So we can point any part of the app with a path like: `chapter-039/subchapter-002`.

At the end of navigation process, we expect to meet some typed content (material),  processed in its particular way, with its interactivity. So, we put the material type between brackets just after the header title text.

:::warning
<small>:page_facing_up: for more info:  [Content types](/ReN1s8RlQAe5nYpBZDb2pA)</small>
:::

## Example

:::warning
Here we explain core concepts shortly. If you want to see a more advanced example, please visit: [content.md](https://hackmd.io/DJaNvhyWQPajAOUn4vwfNQ?edit)
:::


```
# My excelent app name

author: My Name

# Here is first chapter 

## First subchapter [richText]

Some of content

## Second subchapter 

Some other content [fileCard]
``` 

It is enough to get started. For more advanced techniques read further... 

## Floating depth 

Nesting depth of materials can be different. Sometimes you don't need subchapters inside a chapter, so you can place typed material right at the `chapter` level. To do that, just put the material type after the chapter header.
```
# About [richText]

There is content of material with richText type

# chapter one
## subchapter one [richMedia]
```

That means that 1st level header (#) can be one of the two: 
* navigation pointer to subchapter list 
* material, with its title, type, and content

In other words, typed material can appear on the 1st or 2nd level of text in `content.md`. So 2nd level header can also have a different meaning: 
* material with its title, type, and content
* ordinary text heading (in richText), or subtitles block (in richMedia) etc…

## Planned (for next versions)

* Navigation by references (like anchor tag in HTML). 
* Embed-like navigation (you put address of material, and it appears as block in material or popup)
* Main page with extra parameters (date, image, description, labels) for display, order, and filter 

{%hackmd tKQW1R4oSvSm58CCiq1f-Q %}