# MainNavigation

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

## MainNavigation

> There is no dedicated MainNavigation Component. The navigation items are part of the ApplicationHeader

### Example: Example 1

RIO Service

Navigation 1
Navigation 2
Navigation 3

#### React (tsx)

```tsx
import { NavLink } from 'react-router-dom';

import ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';
import ApplicationHeader from '@rio-cloud/rio-uikit/ApplicationHeader';

const navItems = [
    { key: '1', route: <NavLink to='/components/appLayout'>Navigation 1</NavLink> },
    {
        key: '2',
        route: (
            <NavLink to='/2' onClick={event => event.preventDefault()}>
                Navigation 2
            </NavLink>
        ),
    },
    {
        key: '3',
        route: (
            <NavLink to='/3' onClick={event => event.preventDefault()}>
                Navigation 3
            </NavLink>
        ),
    },
];

export default () => (
    <ApplicationLayout className='bg-lighter'>
        <ApplicationLayout.Header>
            <ApplicationHeader label='RIO Service' navItems={navItems} />
        </ApplicationLayout.Header>
        <ApplicationLayout.Body className='uikitDemo'>
            <div className='dummy-class' />
        </ApplicationLayout.Body>
    </ApplicationLayout>
);
```

#### HTML (html)

```html
<div class="ApplicationLayout bg-lighter" style="--ApplicationLayoutBodyBottomBarHeight: 54px;">
    <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>RIO Service</span>
                    </a>
                </li>
            </ul>
            <ul class="SubmoduleNavigation nav">
                <li class="submodule " data-nav-item-key="1">
                    <a class="" href="#/components/appLayout" data-discover="true">Navigation 1</a>
                </li>
                <li class="submodule " data-nav-item-key="2">
                    <a class="" href="#/2" data-discover="true">Navigation 2</a>
                </li>
                <li class="submodule " data-nav-item-key="3">
                    <a class="" href="#/3" data-discover="true">Navigation 3</a>
                </li>
            </ul>
            <ul class="ApplicationActionBar nav navbar-nav navbar-right ">
            </ul>
        </nav>
    </div>
    <div class="ApplicationLayoutBody uikitDemo">
        <div class="module-content-wrapper">
            <div class="module-content smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
                <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
                    <div class="scrollbar-content-wrapper">
                        <div class="scrollbar-content">
                            <div class="dummy-class">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; height: 6px; display: none;">
                    <div class="scrollbar-thumb-horizontal scrollbar-thumb-size-large" style="position: relative; display: block; height: 100%;">
                    </div>
                </div>
                <div class="scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; width: 6px; display: none;">
                    <div class="scrollbar-thumb-vertical scrollbar-thumb-size-large" style="position: relative; display: block; width: 100%;">
                    </div>
                </div>
            </div>
        </div>
        <span class="scroll-to-top">
            <button type="button" class="btn btn-primary btn-icon-only">
                <span class="rioglyph rioglyph-arrow-up">
                </span>
            </button>
        </span>
    </div>
</div>
```