# AppNavigationBar

*Category:* Components
*Section:* Navigation
*Source:* https://uikit.developers.rio.cloud/#/components/appNavigationBar
*Captured:* 2026-04-27T14:57:14.864Z

## AppNavigationBar

### Example: Example 1

Title of content

#### React (tsx)

```tsx
import AppNavigationBar from '@rio-cloud/rio-uikit/AppNavigationBar';

export default () => (
    <div className='bg-white border max-width-300'>
        <AppNavigationBar title='Title of content' />
    </div>
);
```

#### HTML (html)

```html
<div class="bg-white border max-width-300">
    <div class="AppNavigationBar width-100pct height-45 user-select-none padding-x-10 display-grid grid-stack align-items-center text-size-14">
        <div class="grid-stack-item display-flex align-items-center justify-content-between">
            <button type="button" class="btn btn-muted btn-icon-only btn-component text-color-darkest" tabindex="0">
                <span class="rioglyph rioglyph-arrow-left">
                </span>
            </button>
            <div class="btn-toolbar gap-2">
                <span>
                </span>
            </div>
        </div>
        <div class="grid-stack-item text-center text-medium text-color-darker margin-x-25 padding-x-5 ellipsis-1">
            <div class="ellipsis-1">Title of content</div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| title | string \| ReactNode | — | The title for the content that is shown. |
| titleSize | 'md' \| 'lg' | 'md' | Defines the size of the title. Possible values are 'md' and 'lg'. |
| subtitle | string \| ReactNode | — | Adds a subtitle below the title. |
| right | ReactNode | — | Right side area for additional options of buttons like filter etc. that is relevant for the shown content.. |
| backButtonText | string \| ReactNode | — | — |
| border | boolean | false | Add a light bottom border to the wrapper element. |
| onNavigateBack | (event: MouseEvent<HTMLSpanElement>) => void | — | Callback function for when the back navigation button is clicked. |
| className | string | — | Additional classes for the wrapper element. |

### Example: Example 2

Title of content

#### React (tsx)

```tsx
import AppNavigationBar from '@rio-cloud/rio-uikit/AppNavigationBar';
import Button from '@rio-cloud/rio-uikit/components/button/Button';

export default () => (
    <div className='bg-white border max-width-400'>
        <AppNavigationBar
            title='Title of content'
            right={
                <div className='btn-toolbar'>
                    <Button bsStyle={Button.MUTED} iconOnly iconName='rioglyph-filter' className='text-color-darker' />
                    <Button bsStyle={Button.MUTED} iconOnly iconName='rioglyph-cog' className='text-color-darker' />
                </div>
            }
        />
    </div>
);
```

#### HTML (html)

```html
<div class="bg-white border max-width-400">
    <div class="AppNavigationBar width-100pct height-45 user-select-none padding-x-10 display-grid grid-stack align-items-center text-size-14">
        <div class="grid-stack-item display-flex align-items-center justify-content-between">
            <button type="button" class="btn btn-muted btn-icon-only btn-component text-color-darkest" tabindex="0">
                <span class="rioglyph rioglyph-arrow-left">
                </span>
            </button>
            <div class="btn-toolbar gap-2">
                <div class="btn-toolbar">
                    <button type="button" class="btn btn-muted btn-icon-only btn-component text-color-darker" tabindex="0">
                        <span class="rioglyph rioglyph-filter">
                        </span>
                    </button>
                    <button type="button" class="btn btn-muted btn-icon-only btn-component text-color-darker" tabindex="0">
                        <span class="rioglyph rioglyph-cog">
                        </span>
                    </button>
                </div>
            </div>
        </div>
        <div class="grid-stack-item text-center text-medium text-color-darker margin-x-25 padding-x-5 ellipsis-1">
            <div class="ellipsis-1">Title of content</div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| title | string \| ReactNode | — | The title for the content that is shown. |
| titleSize | 'md' \| 'lg' | 'md' | Defines the size of the title. Possible values are 'md' and 'lg'. |
| subtitle | string \| ReactNode | — | Adds a subtitle below the title. |
| right | ReactNode | — | Right side area for additional options of buttons like filter etc. that is relevant for the shown content.. |
| backButtonText | string \| ReactNode | — | — |
| border | boolean | false | Add a light bottom border to the wrapper element. |
| onNavigateBack | (event: MouseEvent<HTMLSpanElement>) => void | — | Callback function for when the back navigation button is clicked. |
| className | string | — | Additional classes for the wrapper element. |

### Example: With more space, a back button label can be shown

With more space, a back button label can be shown
Back

Title of content

#### React (tsx)

```tsx
import AppNavigationBar from '@rio-cloud/rio-uikit/AppNavigationBar';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';

export default () => (
    <>
        <FormLabel>With more space, a back button label can be shown</FormLabel>
        <div className='bg-white max-width-400'>
            <AppNavigationBar title='Title of content' titleSize='lg' backButtonText='Back' border />
        </div>
    </>
);
```

#### HTML (html)

```html
<div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">With more space, a back button label can be shown</div>
<div class="bg-white max-width-400">
    <div class="AppNavigationBar width-100pct height-45 user-select-none padding-x-10 display-grid grid-stack align-items-center text-size-16 border border-bottom-only border-color-lighter">
        <div class="grid-stack-item display-flex align-items-center justify-content-between">
            <button type="button" class="btn btn-muted btn-component text-color-darkest" tabindex="0">
                <span class="rioglyph rioglyph-arrow-left">
                </span>Back</button>
            <div class="btn-toolbar gap-2">
                <span>
                </span>
            </div>
        </div>
        <div class="grid-stack-item text-center text-medium text-color-darker margin-x-25 padding-x-5 ellipsis-1">
            <div class="ellipsis-1">Title of content</div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| title | string \| ReactNode | — | The title for the content that is shown. |
| titleSize | 'md' \| 'lg' | 'md' | Defines the size of the title. Possible values are 'md' and 'lg'. |
| subtitle | string \| ReactNode | — | Adds a subtitle below the title. |
| right | ReactNode | — | Right side area for additional options of buttons like filter etc. that is relevant for the shown content.. |
| backButtonText | string \| ReactNode | — | — |
| border | boolean | false | Add a light bottom border to the wrapper element. |
| onNavigateBack | (event: MouseEvent<HTMLSpanElement>) => void | — | Callback function for when the back navigation button is clicked. |
| className | string | — | Additional classes for the wrapper element. |

### Example: In some cases a subtitle comes in handy

In some cases a subtitle comes in handy
Back

Title of content
lorem ipsum dolor sit amet

#### React (tsx)

```tsx
import AppNavigationBar from '@rio-cloud/rio-uikit/AppNavigationBar';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';

export default () => (
    <>
        <FormLabel>In some cases a subtitle comes in handy</FormLabel>
        <div className='bg-white max-width-400'>
            <AppNavigationBar
                title='Title of content'
                titleSize='lg'
                subtitle='lorem ipsum dolor sit amet'
                backButtonText='Back'
                border
            />
        </div>
    </>
);
```

#### HTML (html)

```html
<div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">In some cases a subtitle comes in handy</div>
<div class="bg-white max-width-400">
    <div class="AppNavigationBar width-100pct height-45 user-select-none padding-x-10 display-grid grid-stack align-items-center text-size-16 border border-bottom-only border-color-lighter">
        <div class="grid-stack-item display-flex align-items-center justify-content-between">
            <button type="button" class="btn btn-muted btn-component text-color-darkest" tabindex="0">
                <span class="rioglyph rioglyph-arrow-left">
                </span>Back</button>
            <div class="btn-toolbar gap-2">
                <span>
                </span>
            </div>
        </div>
        <div class="grid-stack-item text-center text-medium text-color-darker margin-x-25 padding-x-5 ellipsis-1">
            <div class="ellipsis-1">Title of content</div>
            <div class="text-size-12 line-height-12 text-normal margin-top--2">lorem ipsum dolor sit amet</div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| title | string \| ReactNode | — | The title for the content that is shown. |
| titleSize | 'md' \| 'lg' | 'md' | Defines the size of the title. Possible values are 'md' and 'lg'. |
| subtitle | string \| ReactNode | — | Adds a subtitle below the title. |
| right | ReactNode | — | Right side area for additional options of buttons like filter etc. that is relevant for the shown content.. |
| backButtonText | string \| ReactNode | — | — |
| border | boolean | false | Add a light bottom border to the wrapper element. |
| onNavigateBack | (event: MouseEvent<HTMLSpanElement>) => void | — | Callback function for when the back navigation button is clicked. |
| className | string | — | Additional classes for the wrapper element. |