# ApplicationHeader

*Category:* Components
*Section:* Application
*Source:* https://uikit.developers.rio.cloud/#/components/appHeader
*Captured:* 2026-04-27T14:57:09.682Z

This is the header component for all services. All navigation link components that are passed into the header should be based on react-router

## ApplicationHeader

### Example: Example 1

ApplicationHeader

Headline 1
Subline 1

Headline 2
Subline 2

Headline 3
Subline 3

Test A
Test B
Test C
Test D
Test E

Load different nav items

#### React (tsx)

```tsx
import { useEffect, useRef, useState } from 'react';
import { NavLink } from 'react-router-dom';

import ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';
import ApplicationHeader from '@rio-cloud/rio-uikit/ApplicationHeader';
import ActionBarItem from '@rio-cloud/rio-uikit/ActionBarItem';
import Notification from '@rio-cloud/rio-uikit/Notification';
import Dialog from '@rio-cloud/rio-uikit/Dialog';
import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
import Button from '@rio-cloud/rio-uikit/Button';
import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';

const manyNavItems = [
    { key: 'A', route: <NavLink to='/components/appHeader'>Test A</NavLink> },
    { key: 'B', route: <NavLink to='/2'>Test B</NavLink> },
    { key: 'C', route: <NavLink to='/3'>Test C</NavLink> },
    { key: 'D', route: <NavLink to='/4'>Test D</NavLink> },
    { key: 'E', route: <NavLink to='/5'>Test E</NavLink> },
];

const fewNavItems = [
    { key: '1', route: <NavLink to='/6'>Lorem</NavLink> },
    { key: '2', route: <NavLink to='/7'>Ipsum</NavLink> },
    { key: '3', route: <NavLink to='/8'>Dolor</NavLink> },
];

const fakeAppNavigator = (
    <div className='display-flex flex-column padding-10'>
        {[1, 2, 3].map(index => (
            <a
                key={index}
                href='/'
                target='_top'
                className='rounded link bg-white display-flex align-items-start gap-15 user-select-none text-decoration-none hover-bg-lightest padding-15'
            >
                <div className='position-relative padding-20 border border-size-2 border-color-primary bg-white'>
                    <div className='position-absolute inset-0 display-grid place-items-center'>
                        <span className={`text-size-20 rioglyph rioglyph-number-${index}`} />
                    </div>
                </div>
                <div className='flex-1-1'>
                    <div className='line-height-125rel margin-top--3'>
                        <div className='text-size-18 text-medium margin-bottom-3 text-color-primary'>
                            Headline {index}
                        </div>
                        <div className='text-size-14 text-color-darkest text-capitalize'>Subline {index}</div>
                    </div>
                </div>
            </a>
        ))}
    </div>
);

// We use this component to simulate a pre rendered component
const PreRendered = () => {
    const [index, setIndex] = useState(0);

    useEffect(() => {
        let counter = 0;
        const id = setInterval(() => {
            setIndex(counter++);
        }, 1000);
        return () => clearInterval(id);
    }, []);

    return (
        <div className='display-flex flex-row justify-content-between align-items-center'>
            <div>
                <span className='margin-right-5 text-color-gray'>Counter:</span>
                <span>{index}</span>
            </div>
            <div>
                <Button onClick={() => Notification.info(`Button clicked with ${index}`)}>Click me</Button>
            </div>
        </div>
    );
};

const AccountMenuComponent = (
    <ActionBarItem id='accountMenu'>
        <ActionBarItem.Icon>
            <span className='icon rioglyph rioglyph-user' />
        </ActionBarItem.Icon>
        <ActionBarItem.Popover title='Prerending the Popover' useOffscreen>
            <PreRendered />
        </ActionBarItem.Popover>
    </ActionBarItem>
);

const AppHeaderExample = () => {
    const [navItems, setNavItems] = useState(manyNavItems);

    const [showSettingsDialog, setShowSettingsDialog] = useState(false);

    const headerRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        if (headerRef.current) {
            console.log('Header mounted');
        }
    }, [headerRef.current]);

    const handleOnClick = () => {
        setNavItems(prevNavItems => (prevNavItems === fewNavItems ? manyNavItems : fewNavItems));
    };

    const sampleActionBarComponent = (
        <ActionBarItem id='cog'>
            <ActionBarItem.Icon onClick={() => setShowSettingsDialog(true)}>
                <span className='icon rioglyph rioglyph-cog' />
            </ActionBarItem.Icon>
            <Dialog
                show={showSettingsDialog}
                body={
                    <div>
                        <div className='margin-bottom-15'>
                            <i>
                                This is the place for some service specific settings, that are not global for all
                                services.
                            </i>
                        </div>
                        <div className='margin-bottom-25'>
                            <legend>Category one settings</legend>
                            <div className='form-group'>
                                <label className='width-100pct'>
                                    <div>Lorem ipsum</div>
                                    <input
                                        className='form-control margin-y-5'
                                        type='text'
                                        placeholder='Lorem ipsum dolor'
                                    />
                                </label>
                                <label className='width-100pct'>
                                    <div className='margin-bottom-5'>Lorem ipsum</div>
                                    <div className='input-group'>
                                        <span className='input-group-addon'>
                                            <span className='rioglyph rioglyph-user' />
                                        </span>
                                        <input className='form-control' type='text' placeholder='Lorem ipsum dolor' />
                                    </div>
                                </label>
                            </div>
                        </div>
                        <div>
                            <legend>Category two settings</legend>
                            <div className='form-group space-y-10'>
                                <Checkbox>Lorem ipsum solor</Checkbox>
                                <Checkbox defaultChecked>Ipsum dolor sit</Checkbox>
                                <Checkbox>Dolor sit amet</Checkbox>
                            </div>
                        </div>
                    </div>
                }
                title='Service settings'
                footer={
                    <ButtonToolbar>
                        <Button onClick={() => setShowSettingsDialog(false)}>Discard</Button>
                        <Button bsStyle='primary' onClick={() => setShowSettingsDialog(false)}>
                            Apply changes
                        </Button>
                    </ButtonToolbar>
                }
                onClose={() => setShowSettingsDialog(false)}
                bsSize={Dialog.SIZE_SM}
                showCloseButton
            />
        </ActionBarItem>
    );

    return (
        <div>
            <ApplicationLayout>
                <ApplicationLayout.Header>
                    <ApplicationHeader
                        ref={headerRef}
                        label='ApplicationHeader'
                        homeRoute={<NavLink to='/' />}
                        appNavigator={fakeAppNavigator}
                        appNavigatorClassName='appNavigatorClassName'
                        navItems={navItems}
                        onToggleAppMenu={isMenuOpen => console.log({ isMenuOpen })}
                        actionBarItems={[sampleActionBarComponent, AccountMenuComponent]}
                    />
                </ApplicationLayout.Header>
            </ApplicationLayout>
            <div className='margin-top-20 margin-bottom-20'>
                <Button onClick={handleOnClick}>Load different nav items</Button>
            </div>
        </div>
    );
};

export default AppHeaderExample;
```

#### HTML (html)

```html
<div>
    <div class="ApplicationLayout">
        <div class="ApplicationLayoutHeader" id="ApplicationLayoutHeader">
            <nav class="ApplicationHeader user-select-none">
                <div class="navbar-header">
                    <span class="navbar-brand home-icon">
                        <a class="" href="#/" data-discover="true">
                        </a>
                    </span>
                </div>
                <ul class="ModuleNavigation AppMenu user-select-none hasModules appNavigatorClassName">
                    <li class="dropdown">
                        <a class="ModuleNavigation-dropdown dropdown-toggle justify-content-between" role="button" id="basic-nav-dropdown">
                            <span>ApplicationHeader</span>
                            <span class="caret">
                            </span>
                        </a>
                        <ul role="menu" class="dropdown-menu ModuleNavigation-dropdown-menu">
                            <li role="presentation">
                                <div class="display-flex flex-column padding-10">
                                    <a href="/" target="_top" class="rounded link bg-white display-flex align-items-start gap-15 user-select-none text-decoration-none hover-bg-lightest padding-15">
                                        <div class="position-relative padding-20 border border-size-2 border-color-primary bg-white">
                                            <div class="position-absolute inset-0 display-grid place-items-center">
                                                <span class="text-size-20 rioglyph rioglyph-number-1">
                                                </span>
                                            </div>
                                        </div>
                                        <div class="flex-1-1">
                                            <div class="line-height-125rel margin-top--3">
                                                <div class="text-size-18 text-medium margin-bottom-3 text-color-primary">Headline 1</div>
                                                <div class="text-size-14 text-color-darkest text-capitalize">Subline 1</div>
                                            </div>
                                        </div>
                                    </a>
                                    <a href="/" target="_top" class="rounded link bg-white display-flex align-items-start gap-15 user-select-none text-decoration-none hover-bg-lightest padding-15">
                                        <div class="position-relative padding-20 border border-size-2 border-color-primary bg-white">
                                            <div class="position-absolute inset-0 display-grid place-items-center">
                                                <span class="text-size-20 rioglyph rioglyph-number-2">
                                                </span>
                                            </div>
                                        </div>
                                        <div class="flex-1-1">
                                            <div class="line-height-125rel margin-top--3">
                                                <div class="text-size-18 text-medium margin-bottom-3 text-color-primary">Headline 2</div>
                                                <div class="text-size-14 text-color-darkest text-capitalize">Subline 2</div>
                                            </div>
                                        </div>
                                    </a>
                                    <a href="/" target="_top" class="rounded link bg-white display-flex align-items-start gap-15 user-select-none text-decoration-none hover-bg-lightest padding-15">
                                        <div class="position-relative padding-20 border border-size-2 border-color-primary bg-white">
                                            <div class="position-absolute inset-0 display-grid place-items-center">
                                                <span class="text-size-20 rioglyph rioglyph-number-3">
                                                </span>
                                            </div>
                                        </div>
                                        <div class="flex-1-1">
                                            <div class="line-height-125rel margin-top--3">
                                                <div class="text-size-18 text-medium margin-bottom-3 text-color-primary">Headline 3</div>
                                                <div class="text-size-14 text-color-darkest text-capitalize">Subline 3</div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
                <ul class="SubmoduleNavigation nav">
                    <li class="submodule " data-nav-item-key="A">
                        <a aria-current="page" class="active" href="#/components/appHeader" data-discover="true">Test A</a>
                    </li>
                    <li class="submodule " data-nav-item-key="B">
                        <a class="" href="#/2" data-discover="true">Test B</a>
                    </li>
                    <li class="submodule " data-nav-item-key="C">
                        <a class="" href="#/3" data-discover="true">Test C</a>
                    </li>
                    <li class="submodule " data-nav-item-key="D">
                        <a class="" href="#/4" data-discover="true">Test D</a>
                    </li>
                    <li class="submodule " data-nav-item-key="E">
                        <a class="" href="#/5" data-discover="true">Test E</a>
                    </li>
                </ul>
                <ul class="ApplicationActionBar nav navbar-nav navbar-right ">
                    <li role="presentation" class="navigationItem">
                        <div class="ActionBarItem">
                            <div class="ActionBarItemIcon">
                                <span class="icon rioglyph rioglyph-cog">
                                </span>
                            </div>
                        </div>
                    </li>
                    <li role="presentation" class="navigationItem">
                        <div class="ActionBarItem">
                            <div class="ActionBarItemIcon">
                                <span class="icon rioglyph rioglyph-user">
                                </span>
                            </div>
                        </div>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
    <div class="margin-top-20 margin-bottom-20">
        <button type="button" class="btn btn-default btn-component" tabindex="0">Load different nav items</button>
    </div>
</div>
```

#### Props (json)

```json
<NavLink to='https://home.rio.cloud' />
```

## ActionBarItem

The ActionBarItem components consists mainly of two sub-components: Icon and Popover. The Icon component is mandatory and is shown in the header. The Popover component is optional and it's content will be shown inside a Popover.

### Example: Example 2

ApplicationHeader

4

#### React (tsx)

```tsx
import { useState, type ChangeEvent } from 'react';
import { Link } from 'react-router-dom';

import ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';
import ApplicationHeader from '@rio-cloud/rio-uikit/ApplicationHeader';
import ActionBarItem from '@rio-cloud/rio-uikit/ActionBarItem';
import Select from '@rio-cloud/rio-uikit/Select';
import Fade from '@rio-cloud/rio-uikit/Fade';
import ToggleButton from '@rio-cloud/rio-uikit/ToggleButton';
import Notification from '@rio-cloud/rio-uikit/Notification';
import Button from '@rio-cloud/rio-uikit/Button';

const ServiceInfo = () => (
    <ActionBarItem.List>
        <ActionBarItem.ListItem icon='rioglyph-hand-right' onClick={() => Notification.info('Show welcome dialog')}>
            <div className='display-flex align-items-center gap-5'>
                <span>Welcome</span>
                <span className='badge badge-primary'>1</span>
            </div>
        </ActionBarItem.ListItem>
        <ActionBarItem.ListItem
            icon='rioglyph-exclamation-sign'
            onClick={() => Notification.info("Show what's new dialog")}
        >
            What's new?
        </ActionBarItem.ListItem>
        <ActionBarItem.ListItem icon='rioglyph-question-sign' onClick={() => Notification.info('Show features dialog')}>
            Features
        </ActionBarItem.ListItem>
        <ActionBarItem.ListSeparator />
        <ActionBarItem.ListItem icon='rioglyph-envelope' hasLink>
            <Link to='/components/appHeader'>Feedback</Link>
        </ActionBarItem.ListItem>
    </ActionBarItem.List>
);

const ActionBarItemsExample = () => {
    const [showFeedbackNotification, setShowFeedbackNotification] = useState(false);
    const [feedbackButtonText, setFeedbackButtonText] = useState('Send feedback');
    const [value, setValue] = useState('');
    const [rows, setRows] = useState(5);
    const [minRows, setMinRows] = useState(5);
    const [maxRows, setMaxRows] = useState(30);

    const handleFeedbackCategory = (id: string) => {
        switch (id) {
            case '1':
                setFeedbackButtonText('Send usability feedback');
                break;
            case '2':
                setFeedbackButtonText('Send bug report');
                break;
            case '3':
                setFeedbackButtonText('Send feature request');
                break;
            default:
                setFeedbackButtonText('Send feedback');
                break;
        }
    };

    const handleAutosize = (event: ChangeEvent<HTMLTextAreaElement>) => {
        const textareaLineHeight = 20.1; // 1.42857143 + 14px

        const previousRows = event.target.rows;
        event.target.rows = minRows; // reset number of rows in textarea

        const currentRows = Math.floor(event.target.scrollHeight / textareaLineHeight);

        if (currentRows === previousRows) {
            event.target.rows = currentRows;
        }

        if (currentRows >= maxRows) {
            event.target.rows = maxRows;
            event.target.scrollTop = event.target.scrollHeight;
        }

        setValue(event.target.value);
        setRows(currentRows < maxRows ? currentRows : maxRows);
    };

    const title = (
        <div>
            <span>Service XYZ</span>
            <span className='text-color-gray margin-left-10'>v1.1.0</span>
        </div>
    );

    const FeedbackComponent = (
        <ActionBarItem id='feedback' hidePopoverOnClick={false} popoverWidth={400}>
            <ActionBarItem.Icon>
                <span className='icon rioglyph rioglyph-support' />
            </ActionBarItem.Icon>
            <ActionBarItem.Popover title='Customer care center' className='padding-20'>
                <div className='padding-top-5 padding-bottom-5'>
                    <div className='text-center padding-top-10 padding-bottom-25'>
                        <a className='text-size-h4' hre='tel:0049-0800-22550746'>
                            Hotline +(49) 08 00 / 22 55 07 46
                        </a>
                        <div className='text-size-16'>Monday - Friday: 8:00 am - 04:30 pm (MEZ)</div>
                    </div>
                    <form>
                        <div className='form-group'>
                            <input className='form-control' type='email' placeholder='logged.in@user.email' disabled />
                        </div>
                        <div className='form-group'>
                            <Select
                                placeholder='Type of feedback'
                                options={[
                                    {
                                        id: '1',
                                        label: 'Usability',
                                    },
                                    {
                                        id: '2',
                                        label: 'Bug report',
                                    },
                                    {
                                        id: '3',
                                        label: 'Missing feature',
                                    },
                                    {
                                        id: '4',
                                        label: 'Other',
                                    },
                                ]}
                                onChange={item => handleFeedbackCategory(item.id)}
                            />
                        </div>
                        <div className='form-group'>
                            <textarea
                                rows={rows}
                                value={value}
                                className='form-control'
                                onChange={event => handleAutosize(event)}
                            />
                        </div>
                        <div className='display-flex justify-content-end'>
                            <ToggleButton
                                className='margin-bottom-10'
                                active={showFeedbackNotification}
                                onClick={() => setShowFeedbackNotification(!showFeedbackNotification)}
                            >
                                {feedbackButtonText}
                            </ToggleButton>
                        </div>
                        <Fade show={showFeedbackNotification}>
                            <div className='alert alert-success margin-bottom-0'>
                                <strong>Thank you for your feedback!</strong> We will use your feedback for future
                                improvement. In case it`s necessary, we will contact you for further clarification.
                            </div>
                        </Fade>
                    </form>
                </div>
            </ActionBarItem.Popover>
        </ActionBarItem>
    );

    const ServiceInfoComponent = (
        <ActionBarItem id='serviceInfo' className='myItem'>
            <ActionBarItem.Icon>
                <span className='icon rioglyph rioglyph-info-sign' />
            </ActionBarItem.Icon>
            <ActionBarItem.Popover className='myItemPopover' title={title}>
                <ServiceInfo />
            </ActionBarItem.Popover>
        </ActionBarItem>
    );

    const AccountMenuComponent = (
        <ActionBarItem>
            <ActionBarItem.Icon>
                <span className='icon rioglyph rioglyph-user' />
            </ActionBarItem.Icon>
            <ActionBarItem.Popover>
                <ActionBarItem.List>
                    <div className='padding-10'>
                        <div className='text-medium'>This is just an example</div>
                        <div>The real content goes here...</div>
                    </div>
                    <ActionBarItem.ListSeparator />
                    <ActionBarItem.ListItem>
                        <Button
                            bsStyle='default'
                            variant='link'
                            iconName='rioglyph-logout'
                            onClick={() => Notification.info('Logout')}
                        >
                            <span className='hover-text-decoration-none'>Logout</span>
                        </Button>
                    </ActionBarItem.ListItem>
                </ActionBarItem.List>
            </ActionBarItem.Popover>
        </ActionBarItem>
    );

    const Notifications = (
        <ActionBarItem>
            <ActionBarItem.Icon>
                <span className='icon rioglyph rioglyph-notification' />
                <span className='badge badge-primary badge-indicator badge-indicator-pinging'>4</span>
            </ActionBarItem.Icon>
        </ActionBarItem>
    );

    return (
        <ApplicationLayout>
            <ApplicationLayout.Header>
                <ApplicationHeader
                    label='ApplicationHeader'
                    actionBarItems={[FeedbackComponent, ServiceInfoComponent, Notifications, AccountMenuComponent]}
                />
            </ApplicationLayout.Header>
        </ApplicationLayout>
    );
};

export default ActionBarItemsExample;
```

#### HTML (html)

```html
<div class="ApplicationLayout">
    <div class="ApplicationLayoutHeader" id="ApplicationLayoutHeader">
        <nav class="ApplicationHeader user-select-none">
            <div class="navbar-header">
                <span class="navbar-brand home-icon">
                </span>
            </div>
            <ul class="ModuleNavigation AppMenu user-select-none pointer-events-none">
                <li class="dropdown">
                    <a class="ModuleNavigation-dropdown dropdown-toggle justify-content-between inactive" role="button" id="basic-nav-dropdown">
                        <span>ApplicationHeader</span>
                    </a>
                </li>
            </ul>
            <ul class="SubmoduleNavigation nav">
            </ul>
            <ul class="ApplicationActionBar nav navbar-nav navbar-right ">
                <li role="presentation" class="navigationItem">
                    <div class="ActionBarItem">
                        <div class="ActionBarItemIcon">
                            <span class="icon rioglyph rioglyph-support">
                            </span>
                        </div>
                    </div>
                </li>
                <li role="presentation" class="navigationItem">
                    <div class="ActionBarItem myItem">
                        <div class="ActionBarItemIcon">
                            <span class="icon rioglyph rioglyph-info-sign">
                            </span>
                        </div>
                    </div>
                </li>
                <li role="presentation" class="navigationItem">
                    <div class="ActionBarItem">
                        <div class="ActionBarItemIcon">
                            <span class="icon rioglyph rioglyph-notification">
                            </span>
                            <span class="badge badge-primary badge-indicator badge-indicator-pinging">4</span>
                        </div>
                    </div>
                </li>
                <li role="presentation" class="navigationItem">
                    <div class="ActionBarItem">
                        <div class="ActionBarItemIcon">
                            <span class="icon rioglyph rioglyph-user">
                            </span>
                        </div>
                    </div>
                </li>
            </ul>
        </nav>
    </div>
</div>
```

#### Props: ActionBarItem

### ActionBarItem

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| id | string | — | The id is used to identify the item in the DOM. If not provided, a random id is used instead. |
| title | string \| React.ReactNode | — | The title property for the sub-component ActionBarItem.Popover. This can be a String or another component as well as a React-Intl component. |
| className | string | — | Additional class names that are added to the respective component. It can be defined for the parent and all sub-components. |
| hidePopoverOnClick | boolean | true | Defines if the popover should close when any child element is being clicked. |
| popoverWidth | ActionBarItemPopoverWidth | 250 | Possible values are 100, 150, 200, 250, 300, 350, 400, 450 or 500. |
| mobileDialogBodyClassName | string | — | Additional class names that are added to dialog fallback modal-body element. |

#### Props: ActionBarItem.List

### ActionBarItem.List

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| className | string | — | Additional class names that are added to the wrapping list item component. |

#### Props: ActionBarItem.ListItem

### ActionBarItem.ListItem

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| hasLink | boolean | — | Set it to true when you want to use the item as link item. In this case, please use the Link component from react-router-dom instead of an anchor tag to prevent side effects when automatically closing the popover. |
| icon | string | — | The name of the icon to be used for the item. |
| onClick | VoidFunction | — | Callback function to be triggered when the internal button of a list item is clicked. Note: When no callback function is provided, the children are rendered as is without wrapping them in a button. |
| className | string | — | Additional class names that are added to the wrapping list item component. |

#### Props: ActionBarItem.ListSeparator

### ActionBarItem.ListSeparator

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| className | string | — | Additional class names that are added to the wrapping list item component. |

#### Props: ActionBarItem.Popover

### ActionBarItem.Popover

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| title | string \| ReactNode | — | The popover title. |
| useOffscreen | boolean | — | Define whether the popover content shall be rendered behind the scene. This allows to preload content or to avoid unmounting the content component. |
| className | string | — | Additional class names that are added to the popover content. |