NavView

The NavView (Navigation View) component is a responsive sidebar shell designed for application-level navigation. It implements the "hamburger menu" pattern, supporting toggleable compact/expanded states and adaptive breakpoints.

FrankUI Studio

Dashboard Content Area

Click the hamburger button in the top left corner of the pane to collapse it into a compact column. On smaller screen viewports (below 576px/sm breakpoint as defined by data-expand-point="sm"), the menu will collapse automatically.

State Status

Responsive: Active

<!-- Responsive NavView Shell -->
<div data-role="navview" data-expand-point="sm">
    
    <!-- Sidebar Pane -->
    <div class="navview-pane">
        
        <!-- Header Pull Button -->
        <div class="navview-pane-header">
            <button class="pull-button">
                <i data-lucide="menu"></i>
            </button>
            <span class="navview-pane-title">My Application</span>
        </div>

        <!-- Menu Items -->
        <ul class="navview-menu">
            <li class="item-header">Section</li>
            <li class="active">
                <a href="#">
                    <span class="icon"><i data-lucide="home"></i></span>
                    <span class="caption">Home</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="icon"><i data-lucide="settings"></i></span>
                    <span class="caption">Settings</span>
                </a>
            </li>
        </ul>

    </div>

    <!-- Main Content Body -->
    <div class="navview-content">
        <h1>Main Workspace Content</h1>
    </div>

</div>

<!-- Initialize script in footer -->
<script>
    document.addEventListener('DOMContentLoaded', () => {
        NavView.init();
    });
</script>

Configuration Options

Control NavView attributes declaratively on the main container element:

Attribute	Values	Description
data-role="navview"	`navview`	Identifies the element to be initialized by the autoloader.
data-expand-point	`fs` \| `sx` \| `sm` \| `ld` \| `md` \| `lg` \| `xl` \| `xxl` \| `xxxl`	Breakpoint at which the sidebar expands automatically (default is `md`/768px). Below this point, the pane collapses into compact icon mode.