Class NavbarLayout


public class NavbarLayout extends StyledElement<NavbarLayout>
A responsive navigation bar layout with brand, menu, and action areas.

NavbarLayout provides a common navigation bar structure with three distinct regions:

  • Brand - Logo/site name area (left)
  • Menu - Navigation links (center or expanding)
  • Actions - Buttons, user menu, etc. (right)

Responsive Behavior:

On smaller screens, the menu area can be hidden and replaced with a toggle button that opens a Drawer. Use setCollapseAt(Breakpoint) to configure when this collapse occurs.

Usage:


 // Basic navbar
 NavbarLayout navbar = new NavbarLayout();
 navbar.setBrand(logo);
 navbar.setMenu(navLinks);
 navbar.setActions(userMenu);

 // With mobile toggle
 NavbarLayout navbar = new NavbarLayout()
     .setBrand(logo)
     .setMenu(navLinks)
     .setMobileToggle(hamburgerBtn)
     .setCollapseAt(Breakpoint.MD);

 // Sticky navbar
 Sticky stickyNav = Sticky.top(0).setBackground("#fff").setZIndex(100);
 stickyNav.addElement(navbar);
 
Since:
2025
Version:
1.0
Author:
Marvin P. Warble Jr.
See Also:
  • Constructor Details

    • NavbarLayout

      public NavbarLayout()
      Constructs a new NavbarLayout.
  • Method Details

    • initialize

      protected void initialize()
      Builds the element tree for the navbar.
      Overrides:
      initialize in class StyledElement<NavbarLayout>
    • setBrand

      public NavbarLayout setBrand(Element<?> brand)
      Sets the brand/logo content.
      Parameters:
      brand - the brand element (logo, site name, etc.)
      Returns:
      this NavbarLayout for method chaining
    • setMenu

      public NavbarLayout setMenu(Element<?> menu)
      Sets the navigation menu content.

      This area will be hidden on smaller screens when collapse is enabled.

      Parameters:
      menu - the menu element (navigation links, etc.)
      Returns:
      this NavbarLayout for method chaining
    • setActions

      public NavbarLayout setActions(Element<?> actions)
      Sets the actions area content.
      Parameters:
      actions - the actions element (buttons, user menu, etc.)
      Returns:
      this NavbarLayout for method chaining
    • setMobileToggle

      public NavbarLayout setMobileToggle(Element<?> toggle)
      Sets the mobile toggle button (hamburger menu).

      This button is shown only when the menu is collapsed on smaller screens.

      Parameters:
      toggle - the toggle button element
      Returns:
      this NavbarLayout for method chaining
    • setCollapseAt

      public NavbarLayout setCollapseAt(Breakpoint breakpoint)
      Sets the breakpoint at which the menu collapses to mobile view.

      At breakpoints smaller than this, the menu will be hidden and the mobile toggle will be shown.

      Parameters:
      breakpoint - the collapse breakpoint (default: MD)
      Returns:
      this NavbarLayout for method chaining
    • setGap

      public NavbarLayout setGap(int gap)
      Sets the gap between navbar items.
      Overrides:
      setGap in class StyledElement<NavbarLayout>
      Parameters:
      gap - the gap in pixels
      Returns:
      this NavbarLayout for method chaining
    • setGap

      public NavbarLayout setGap(String gap)
      Sets the gap between navbar items.
      Overrides:
      setGap in class StyledElement<NavbarLayout>
      Parameters:
      gap - the gap value (e.g., "1rem", "16px")
      Returns:
      this NavbarLayout for method chaining
    • setPaddingX

      public NavbarLayout setPaddingX(int padding)
      Sets horizontal padding for the navbar.
      Parameters:
      padding - the padding in pixels
      Returns:
      this NavbarLayout for method chaining
    • setPaddingX

      public NavbarLayout setPaddingX(String padding)
      Sets horizontal padding for the navbar.
      Parameters:
      padding - the padding value (e.g., "1rem", "16px")
      Returns:
      this NavbarLayout for method chaining
    • setPaddingY

      public NavbarLayout setPaddingY(int padding)
      Sets vertical padding for the navbar.
      Parameters:
      padding - the padding in pixels
      Returns:
      this NavbarLayout for method chaining
    • setPaddingY

      public NavbarLayout setPaddingY(String padding)
      Sets vertical padding for the navbar.
      Parameters:
      padding - the padding value (e.g., "0.5rem", "8px")
      Returns:
      this NavbarLayout for method chaining
    • centerMenu

      public NavbarLayout centerMenu()
      Centers the menu between brand and actions.
      Returns:
      this NavbarLayout for method chaining
    • spaceBetween

      public NavbarLayout spaceBetween()
      Distributes space between brand, menu, and actions.
      Returns:
      this NavbarLayout for method chaining
    • setHeight

      public NavbarLayout setHeight(int height)
      Sets a fixed height for the navbar.
      Overrides:
      setHeight in class StyledElement<NavbarLayout>
      Parameters:
      height - the height in pixels
      Returns:
      this NavbarLayout for method chaining
    • setHeight

      public NavbarLayout setHeight(String height)
      Sets a fixed height for the navbar.
      Overrides:
      setHeight in class StyledElement<NavbarLayout>
      Parameters:
      height - the height value (e.g., "64px", "4rem")
      Returns:
      this NavbarLayout for method chaining
    • getBrandArea

      public Element<?> getBrandArea()
      Provides access to the brand area for advanced customization.
      Returns:
      the brand area element
    • getMenuArea

      public Element<?> getMenuArea()
      Provides access to the menu area for advanced customization.
      Returns:
      the menu area element
    • getActionsArea

      public Element<?> getActionsArea()
      Provides access to the actions area for advanced customization.
      Returns:
      the actions area element
    • compactNavbar

      public NavbarLayout compactNavbar()
      Applies compact navbar height (48px) - suitable for secondary navbars.
      Returns:
      this NavbarLayout for method chaining
    • standardNavbar

      public NavbarLayout standardNavbar()
      Applies standard navbar height (64px) - the default.
      Returns:
      this NavbarLayout for method chaining
    • tallNavbar

      public NavbarLayout tallNavbar()
      Applies tall navbar height (80px) - for prominent navigation.
      Returns:
      this NavbarLayout for method chaining
    • lightTheme

      public NavbarLayout lightTheme()
      Applies light theme styling (white background, dark text).
      Returns:
      this NavbarLayout for method chaining
    • darkTheme

      public NavbarLayout darkTheme()
      Applies dark theme styling (dark background, light text).
      Returns:
      this NavbarLayout for method chaining
    • transparentTheme

      public NavbarLayout transparentTheme()
      Applies transparent styling (no background).
      Returns:
      this NavbarLayout for method chaining
    • primaryTheme

      public NavbarLayout primaryTheme(String primaryColor)
      Applies primary color theme styling.
      Parameters:
      primaryColor - the primary background color
      Returns:
      this NavbarLayout for method chaining
    • compactSpacing

      public NavbarLayout compactSpacing()
      Applies compact spacing with smaller padding.
      Returns:
      this NavbarLayout for method chaining
    • spaciousSpacing

      public NavbarLayout spaciousSpacing()
      Applies spacious spacing with larger padding.
      Returns:
      this NavbarLayout for method chaining
    • fixedTop

      public NavbarLayout fixedTop()
      Configures the navbar as fixed to the top of the viewport.
      Returns:
      this NavbarLayout for method chaining
    • stickyTop

      public NavbarLayout stickyTop()
      Configures the navbar as sticky at the top.
      Returns:
      this NavbarLayout for method chaining
    • withShadow

      public NavbarLayout withShadow()
      Adds a subtle shadow to the navbar.
      Returns:
      this NavbarLayout for method chaining