Creates a slide-out side navigation panel. Sidenavs are commonly used for mobile navigation menus triggered from a navbar hamburger button.

Syntax

Result = MaterialSB::Sidenav(Flags = #Sidenav_Default)

Parameters

Flags

Optional. Combination of sidenav flags for positioning and behavior.

Flags

Flag	Description
#Sidenav_Default	Standard sidenav (slides in from left)
#Sidenav_Fixed	Always visible on large screens
#Sidenav_Right	Open from the right side
#Sidenav_CloseOnClick	Close sidenav when a link is clicked

Return Value

Returns the sidenav element. Use this reference for Init().

Remarks

Important: Sidenav requires Init() to be called before it can be used.

The sidenav is automatically added to the document body. Use SidenavAddLink() to add navigation links with optional icons, SidenavAddDivider() for separators, SidenavAddSubheader() for section headers, and SidenavAddUserView() for a user profile section at the top.

To connect a sidenav to a navbar hamburger button, use NavbarAddSidenavTrigger() with a matching ID.

Example

Procedure Main(Success)
  If Success
    ; Create navbar with sidenav trigger
    MaterialSB::Navbar(MaterialSB::#Navbar_Shadow2)
    MaterialSB::NavbarAddSidenavTrigger("mobile-nav")
    MaterialSB::NavbarAddLogo("My App")
    
    ; Create sidenav
    mySidenav = MaterialSB::Sidenav()
    MaterialSB::SetAttribute(mySidenav, "id", "mobile-nav")
    
    ; Add user profile section
    MaterialSB::SidenavAddUserView("John Doe", "john@example.com", "images/avatar.jpg", "images/bg.jpg")
    
    ; Add navigation links with icons
    MaterialSB::SidenavAddLink("Dashboard", "#dashboard", "dashboard")
    MaterialSB::SidenavAddLink("Profile", "#profile", "person")
    MaterialSB::SidenavAddLink("Settings", "#settings", "settings")
    
    ; Add divider and subheader
    MaterialSB::SidenavAddDivider()
    MaterialSB::SidenavAddSubheader("More")
    
    MaterialSB::SidenavAddLink("Help", "#help", "help")
    MaterialSB::SidenavAddLink("Logout", "#logout", "exit_to_app")
    
    ; Initialize sidenav
    MaterialSB::Init(mySidenav, #Null)
    
    ; Main content
    MaterialSB::Row(MaterialSB::#Grid_Container)
      MaterialSB::Col(12)
        MaterialSB::Append(MaterialSB::Header("Welcome", 3))
        MaterialSB::Append(MaterialSB::Paragraph("Click the hamburger menu to open the sidenav."))
      MaterialSB::CloseCurrentParent()
    MaterialSB::CloseCurrentParent()
  EndIf
EndProcedure

MaterialSB::Download(@Main())

See Also

SidenavAddLink(), SidenavAddDivider(), SidenavAddSubheader(), SidenavAddUserView(), NavbarAddSidenavTrigger(), Init()