Class: UI::NavigationMenu

Inherits:
Phlex::HTML
  • Object
show all
Includes:
NavigationMenuBehavior
Defined in:
app/components/ui/navigation_menu.rb

Overview

NavigationMenu - Phlex implementation

A collection of links for navigating websites. Built on Radix UI patterns. Uses NavigationMenuBehavior concern for shared styling logic.

Examples:

Basic usage

render UI::NavigationMenu.new do
  render UI::List.new do
    render UI::Item.new do
      render UI::Trigger.new { "Getting Started" }
      render UI::Content.new do
        render UI::Link.new(href: "/docs") { "Introduction" }
      end
    end
  end
end

With viewport disabled

render UI::NavigationMenu.new(viewport: false) do
  # Content appears directly under trigger instead of in viewport
end

Instance Method Summary collapse

Methods included from NavigationMenuBehavior

#navigation_menu_classes, #navigation_menu_data_attributes, #navigation_menu_html_attributes

Constructor Details

#initialize(viewport: true, delay_duration: 200, skip_delay_duration: 300, classes: "", **attributes) ⇒ NavigationMenu

Returns a new instance of NavigationMenu.

Parameters:

  • viewport (Boolean) (defaults to: true) —

    Whether to use viewport for content positioning

  • delay_duration (Integer) (defaults to: 200) —

    Delay in ms before opening on hover

  • skip_delay_duration (Integer) (defaults to: 300) —

    Delay skip period between items

  • classes (String) (defaults to: "") —

    Additional CSS classes to merge

  • attributes (Hash) —

    Additional HTML attributes



32
33
34
35
36
37
38
 
# File 'app/components/ui/navigation_menu.rb', line 32

def initialize(viewport: true, delay_duration: 200, skip_delay_duration: 300, classes: "", **attributes)
  @viewport = viewport
  @delay_duration = delay_duration
  @skip_delay_duration = skip_delay_duration
  @classes = classes
  @attributes = attributes
end

Instance Method Details

#view_template(&block) ⇒ Object 



40
41
42
43
44
45
46
47
48
49
 
# File 'app/components/ui/navigation_menu.rb', line 40

def view_template(&block)
  nav(**navigation_menu_html_attributes.deep_merge(@attributes)) do
    yield if block_given?

    # Render viewport if enabled
    if @viewport
      render UI::Viewport.new
    end
  end
end