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

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.

PropTypeDefault
adaptive
Enables adaptive mode
booleantrue
adaptiveBreakpoint
Breakpoint for adaptive mode
string(max-width: 991.98px)
opened
Sidenav open state
booleanfalse
fixedWidth
Fixed sidenav width
number | string | nullnull
mode
Display mode ('over', 'push', 'side')
SidenavModeover
position
Sidenav position ('start', 'end')
SidenavPositionstart
collapsed
Sidenav collapsed state
booleanfalse
disableClose
Disables closing the sidenav
booleanfalse
EventDescription
openedChangeEvent emitted when the open state changes