Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Custom Inputs
Select
Components
Components
78
Micro Charts
Navigation
Libraries
Content Editor
Data View
Form Builder
Image Designer
Kanban Board
PDF Viewer
Video Player
Visual Builder
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Buy License

Sidenav

Sidenav is a responsive shell container for side surfaces. Use it when a page or app shell needs a side region that can open, close, push content, overlay content, sit beside content, collapse to icon width, show a backdrop, adapt to a mobile breakpoint, and manage focus.

Compose Sidenav with ngs-sidenav-container, ngs-sidenav, and ngs-sidenav-content. For admin navigation shells, place ngs-sidebar inside ngs-sidenav; Sidebar owns the actual navigation items.

Do not use Sidenav as the navigation structure itself, a temporary task drawer, a persistent tabbed tool panel, a static local column, a modal, a confirmation dialog, or an action menu. Use Sidebar, Navigation, Drawer, SidePanel, Panel, LayoutSidebar, Dialog, Confirm, or Menu when those match the job better.

The NgStarter Angular Sidenav component lets you provide a responsive shell container for side surfaces that can open, close, collapse, overlay, or push content. Use ngs-sidenav-container with ngs-sidenav and ngs-sidenav-content when a page or app shell needs a side region with behavior: opened state, open/close/toggle methods, mode over/push/side, position start/end, collapsed icon-width state, disableClose, backdrop and backdropClick, adaptive mobile mode through adaptive and adaptiveBreakpoint, fixedWidth, autosize, and autoFocus. It includes examples for Basic sidenav.

Basic sidenav

Use Sidenav when the side region needs open and close behavior, overlay or push modes, backdrop handling, and a separate content area.

Closed due to: