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
    • setCenterMenu

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

      public NavbarLayout setMenuStart()
      Aligns the menu to start (left) after the brand.
      Returns:
      this NavbarLayout for method chaining
    • setMenuEnd

      public NavbarLayout setMenuEnd()
      Aligns the menu to end (right) before the actions.
      Returns:
      this NavbarLayout for method chaining
    • setSpaceBetween

      public NavbarLayout setSpaceBetween()
      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
    • setCompactNavbar

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

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

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

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

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

      public NavbarLayout setTransparentTheme()
      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
    • setCompactSpacing

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

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

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

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

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