Class: BulmaPhlex::NavigationBar

Inherits:
Base
  • Object
show all
Defined in:
lib/bulma_phlex/navigation_bar.rb

Overview

Renders the [Bulma navbar](bulma.io/documentation/components/navbar/) component.

A responsive navigation header with support for branding, left/right **navigation links**, and **dropdown menus**, automatically collapsing on mobile devices. Supports color, transparency, spacing, and shadow options. Uses the Stimulus controller ‘bulma-phlex–navigation-bar` (available via the `bulma-phlex-rails` gem) for mobile menu toggling.

## Example

render BulmaPhlex::NavigationBar.new do |navbar|
  navbar.brand do
    a(href: "/", class: "navbar-item") { "My App" }
  end

  navbar.left do
    a(href: "/", class: "navbar-item") { "Home" }
    a(href: "/products", class: "navbar-item") { "Products" }
  end

  navbar.right do
    a(href: "/about", class: "navbar-item") { "About" }

    div(class: "navbar-item has-dropdown is-hoverable") do
      a(class: "navbar-link") { "Account" }
      render BulmaPhlex::NavigationBarDropdown.new do |dropdown|
        dropdown.item "Sign In", "/login"
        dropdown.item "Register", "/register"
      end
    end
  end
end

Class Method Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(container: false, color: nil, transparent: false, spaced: false, shadow: false, **html_attributes) ⇒ NavigationBar

Returns a new instance of NavigationBar.



55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
# File 'lib/bulma_phlex/navigation_bar.rb', line 55

def initialize(container: false,
               color: nil,
               transparent: false,
               spaced: false,
               shadow: false,
               **html_attributes)
  @container = container
  @color = color
  @transparent = transparent
  @spaced = spaced
  @shadow = shadow
  @html_attributes = html_attributes

  @brand = []
  @left = []
  @right = []
end

Class Method Details

.new(container: false, color: nil, transparent: false, spaced: false, shadow: false, **html_attributes) ⇒ Object

Parameters

  • ‘container` — If `true`, wraps the navbar content in a `.container` for fixed-width layout. Can also be a string or symbol to specify a custom container class

  • ‘color` — Sets the navbar color (e.g., `“primary”`, `“light”`, `“dark”`)

  • ‘transparent` — If `true`, makes the navbar transparent

  • ‘spaced` — If `true`, adds spacing to the navbar

  • ‘shadow` — If `true`, adds a shadow to the navbar

  • ‘**html_attributes` — Additional HTML attributes for the `<nav>` element



46
47
48
49
50
51
52
53
 
# File 'lib/bulma_phlex/navigation_bar.rb', line 46

def self.new(container: false,
             color: nil,
             transparent: false,
             spaced: false,
             shadow: false,
             **html_attributes)
  super
end

Instance Method Details

#brand(&block) ⇒ Object

Sets the brand area of the navbar (typically a logo or site name).

Expects a block that renders the brand content. Can be called multiple times.



110
111
112
 
# File 'lib/bulma_phlex/navigation_bar.rb', line 110

def brand(&block)
  @brand << block
end

#left(&block) ⇒ Object

Adds content to the left side of the navbar menu. Can be called multiple times.

Expects a block that renders navbar items (e.g. ‘<a class=“navbar-item”>`).



117
118
119
 
# File 'lib/bulma_phlex/navigation_bar.rb', line 117

def left(&block)
  @left << block
end

#right(&block) ⇒ Object

Adds content to the right side of the navbar menu. Can be called multiple times.

Expects a block that renders navbar items (e.g. ‘<a class=“navbar-item”>`).



124
125
126
 
# File 'lib/bulma_phlex/navigation_bar.rb', line 124

def right(&block)
  @right << block
end

#view_template ⇒ Object 



73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
 
# File 'lib/bulma_phlex/navigation_bar.rb', line 73

def view_template(&)
  vanish(&)

  nav(**mix(nav_attributes, @html_attributes)) do
    optional_container do
      div(class: "navbar-brand") do
        @brand.each(&:call)

        a(class: "navbar-burger",
          role: "button",
          aria_label: "menu",
          aria_expanded: "false",
          data: {
            action: "bulma-phlex--navigation-bar#toggle",
            "bulma-phlex--navigation-bar-target": "burger"
          }) do
          4.times { span(aria_hidden: "true") }
        end
      end

      div(class: "navbar-menu",
          data: { "bulma-phlex--navigation-bar-target": "menu" }) do
        div(class: "navbar-start") do
          @left.each(&:call)
        end

        div(class: "navbar-end") do
          @right.each(&:call)
        end
      end
    end
  end
end