# SubNavigation

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

## SubNavigation

### Example: Example 1

Subnavigation 1
Subnavigation 2
Subnavigation 3

#### React (tsx)

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

import SubNavigation from '@rio-cloud/rio-uikit/SubNavigation';

export default () => (
    <div className='bg-white border max-width-500'>
        <SubNavigation
            navItems={[
                {
                    key: '1',
                    route: <NavLink to='/components/subNavigation'>Subnavigation 1</NavLink>,
                },
                {
                    key: '2',
                    route: (
                        <NavLink to='/components/appLayout' onClick={event => event.preventDefault()}>
                            Subnavigation 2
                        </NavLink>
                    ),
                },
                {
                    key: '3',
                    route: (
                        <NavLink to='/components/appLayout' onClick={event => event.preventDefault()}>
                            Subnavigation 3
                        </NavLink>
                    ),
                },
            ]}
        />
    </div>
);
```

#### HTML (html)

```html
<div class="bg-white border max-width-500">
    <div class="SubNavigation width-100pct overflow-auto">
        <ul class="SubmoduleNavigation nav">
            <li class="submodule" data-nav-item-key="1">
                <a aria-current="page" class="active" href="#/components/subNavigation" data-discover="true">Subnavigation 1</a>
            </li>
            <li class="submodule" data-nav-item-key="2">
                <a class="" href="#/components/appLayout" data-discover="true">Subnavigation 2</a>
            </li>
            <li class="submodule" data-nav-item-key="3">
                <a class="" href="#/components/appLayout" data-discover="true">Subnavigation 3</a>
            </li>
        </ul>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| navItems | ModulePropType[] | — | List of navigation items with key and route prop. The route prop is a react-router NavLink component with an active style. |
| className | string | — | Additional classes for the wrapper element. |

## SubNavigation with offset

### Example: Example 2

RIO Service

Navigation 1
Navigation 2
Navigation 3

Subnavigation 1
Subnavigation 2
Subnavigation 3

#### React (tsx)

```tsx
import { useState, useEffect } 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 ApplicationLayoutBodyNavigation from '@rio-cloud/rio-uikit/ApplicationLayoutBodyNavigation';
import SubNavigation from '@rio-cloud/rio-uikit/SubNavigation';
import useResizeObserver from '@rio-cloud/rio-uikit/useResizeObserver';
import { SCREEN_MD } from '@rio-cloud/rio-uikit/DeviceUtils';

export default () => {
    const currentLocation = window.location.hash.replace('#', '/');
    const navItems = [
        { key: '1', route: <NavLink to={currentLocation}>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>
            ),
        },
    ];

    // Listen for resize changes of the target element defined by the ref
    // Note: this is for demo purpose only when resizing the demo playground.
    // The SubNavigation component handles this case internally
    const { ref, isMobile } = useResizer();
    const bodyNavigationClasses = isMobile ? '' : 'has-offset';

    return (
        <ApplicationLayout className='bg-lighter' layoutRef={ref}>
            <ApplicationLayout.Header>
                <ApplicationHeader label='RIO Service' navItems={navItems} />
            </ApplicationLayout.Header>
            <ApplicationLayout.Body
                className='uikitDemo'
                navigation={
                    <ApplicationLayoutBodyNavigation className={bodyNavigationClasses}>
                        <SubNavigation
                            navItems={[
                                {
                                    key: '1',
                                    route: <NavLink to={currentLocation}>Subnavigation 1</NavLink>,
                                },
                                {
                                    key: '2',
                                    route: (
                                        <NavLink to='/2' onClick={event => event.preventDefault()}>
                                            Subnavigation 2
                                        </NavLink>
                                    ),
                                },
                                {
                                    key: '3',
                                    route: (
                                        <NavLink to='/3' onClick={event => event.preventDefault()}>
                                            Subnavigation 3
                                        </NavLink>
                                    ),
                                },
                            ]}
                        />
                    </ApplicationLayoutBodyNavigation>
                }
            >
                <div className='dummy-class' />
            </ApplicationLayout.Body>
        </ApplicationLayout>
    );
};

const useResizer = () => {
    const [isMobile, setIsMobile] = useState(false);
    const [ref, observerEntry] = useResizeObserver();
    const contentRect = observerEntry?.contentRect;
    useEffect(() => {
        if (!contentRect) {
            return;
        }
        const width = Math.round(contentRect.width);
        if (width <= SCREEN_MD) {
            setIsMobile(true);
        } else {
            setIsMobile(false);
        }
    }, [contentRect]);

    return { ref, isMobile };
};
```

#### 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 aria-current="page" class="active" href="//components/subNavigation">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="ApplicationLayoutBodyNavigation">
                <div class="SubNavigation width-100pct overflow-auto">
                    <ul class="SubmoduleNavigation nav">
                        <li class="submodule" data-nav-item-key="1">
                            <a aria-current="page" class="active" href="//components/subNavigation">Subnavigation 1</a>
                        </li>
                        <li class="submodule" data-nav-item-key="2">
                            <a class="" href="#/2" data-discover="true">Subnavigation 2</a>
                        </li>
                        <li class="submodule" data-nav-item-key="3">
                            <a class="" href="#/3" data-discover="true">Subnavigation 3</a>
                        </li>
                    </ul>
                </div>
            </div>
            <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>
```

## SubNavigation without offset

### Example: Example 3

RIO Service

Navigation 1
Navigation 2
Navigation 3

Subnavigation 1
Subnavigation 2
Subnavigation 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';
import ApplicationLayoutBodyNavigation from '@rio-cloud/rio-uikit/ApplicationLayoutBodyNavigation';
import SubNavigation from '@rio-cloud/rio-uikit/SubNavigation';

export default () => {
    const currentLocation = window.location.hash.replace('#', '/');
    const navItems = [
        { key: '1', route: <NavLink to={currentLocation}>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>
            ),
        },
    ];

    return (
        <ApplicationLayout className='bg-lighter'>
            <ApplicationLayout.Header>
                <ApplicationHeader label='RIO Service' navItems={navItems} />
            </ApplicationLayout.Header>
            <ApplicationLayout.Body
                className='uikitDemo'
                navigation={
                    <ApplicationLayoutBodyNavigation>
                        <SubNavigation
                            navItems={[
                                {
                                    key: '1',
                                    route: <NavLink to={currentLocation}>Subnavigation 1</NavLink>,
                                },
                                {
                                    key: '2',
                                    route: (
                                        <NavLink to='/2' onClick={event => event.preventDefault()}>
                                            Subnavigation 2
                                        </NavLink>
                                    ),
                                },
                                {
                                    key: '3',
                                    route: (
                                        <NavLink to='/3' onClick={event => event.preventDefault()}>
                                            Subnavigation 3
                                        </NavLink>
                                    ),
                                },
                            ]}
                        />
                    </ApplicationLayoutBodyNavigation>
                }
            >
                <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 aria-current="page" class="active" href="//components/subNavigation">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="ApplicationLayoutBodyNavigation">
                <div class="SubNavigation width-100pct overflow-auto">
                    <ul class="SubmoduleNavigation nav">
                        <li class="submodule" data-nav-item-key="1">
                            <a aria-current="page" class="active" href="//components/subNavigation">Subnavigation 1</a>
                        </li>
                        <li class="submodule" data-nav-item-key="2">
                            <a class="" href="#/2" data-discover="true">Subnavigation 2</a>
                        </li>
                        <li class="submodule" data-nav-item-key="3">
                            <a class="" href="#/3" data-discover="true">Subnavigation 3</a>
                        </li>
                    </ul>
                </div>
            </div>
            <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>
```