---
title: NavigationBar
description: NavigationBar API.
---

import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';

<CodeSnippetMD imagePath="/src/assets/generated/navigationbar.png" scale="3" imageWidth="300" imageHeight="200" imageAlt="">
```slint
import { NavigationBar } from "@material";
export component Example inherits Window {
    width: 400px;
    height: 200px;
    background: transparent;
    NavigationBar {
        width: parent.width;
        height: 80px;
        items: [
            { icon: @image-url("../icons/share.svg"), text: "Home" },
            { icon: @image-url("../icons/search.svg"), text: "Search" },
            { icon: @image-url("../icons/settings.svg"), text: "Settings" }
        ];
    }
}
```
</CodeSnippetMD>

A `NavigationBar` is a bottom navigation component that displays a row of navigation items with icons and labels. It's commonly used for primary navigation in mobile applications.

## Properties

### current-index
<SlintProperty propName="current-index" typeName="int" propertyVisibility="in-out">
The index of the currently selected navigation item.

```slint no-test "current-index: 0;"
NavigationBar {
    current-index: 0;
}
```
</SlintProperty>

### items
<SlintProperty propName="items" typeName="[struct]" structName="NavigationItem">
An array of navigation items to display in the bar.
</SlintProperty>

## Callbacks

### index-changed(index: int)
Invoked when the `current-index` changes.

## Functions

### select(index: int)
Selects the navigation item at the specified index.