# Vertical Nav Bar

In our first session we created a simple schema for our Navigation bar. Now that we have all screens created let's go a step a head and create the full schema.

### Action And Dropdown

Each item of our schema can be of type "Action" or "Dropdown". Creating a dropdown means that we are nesting items, creating a sub-menu. In our example we have the dropdown "Manage Tasks".

![Vertical Nav Bar](https://3220951636-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnUfK4SRGZUB01uvHGeDB%2Fuploads%2FRgZubVwMaWpH0wdS2qyq%2Fimage.png?alt=media\&token=cf0603cd-cad0-41d2-b220-9610780b7a9a)

```csharp
ClearCollect(
    globalnav,
    {
        type: "Action",
        title: "Dashboard",
        key: "dashboard",
        icon: "chart-line"
    },
    {
        type: "DropDown",
        title: "Manage Tasks",
        icon: "edit",
        key: "alltasks",
        dropDown: [
            {
        type: "Action",
        title: "New task",
        icon: "plus",
        key: "newtask"
    },
    {
        type: "Action",
        title: "All tasks",
        icon: "clipboard-list",
        key: "alltasks"
    }
        ]
    },
 
    {
        type: "Action",
        title: "List view",
        key: "list",
        icon: "list"
    },
    {
        type: "Action",
        title: "Kanban",
        key: "kanban",
        icon: "address-card"
    },
    {
        type: "Action",
        title: "Roadmap",
        key: "roadmap",
        icon: "map"
    }
);
```

### Configuring action

Now  that the schema is ready we can create actions for each of the items. Notice that on the schema presented previously we have a property called **key.** We can get this as an output property. Nav Bar has an **OnChange property** that is triggered everytime an interaction happens. On the snippet below we are using the **switch** statement to check the current key and Navigate to some screen.&#x20;

{% hint style="info" %}
Notice that we are using **Self** to refer to the nav bar
{% endhint %}

```csharp
Switch(
    Self.CurrentKey,
    "newtask",
    Navigate(
        'New Task Screen',
        Fade
    );
    NewForm(Form_tasks),
    "alltasks",
    Navigate(
        'Tasks Screen',
        Fade
    ),
    "list",
    Navigate(
        'Listview Screen',
        Fade
    ),
    "dashboard",
    Navigate(
        'Dashboard Screen',
        Fade
    ),
    "kanban",
    Navigate(
        'Kanban Screen',
        Fade
    ),
    "roadmap",
    Navigate(
        'Roadmap Screen',
        Fade
    )
)
```
