dropdown

Documentation

Overview

templ: version: v0.3.943

Index

• func Dropdown(props ...DropdownProps) templ.Component
• func DropdownContent(props ...DropdownContentProps) templ.Component
• func DropdownDivider(props ...DropdownDividerProps) templ.Component
• func DropdownItem(props ...DropdownItemProps) templ.Component
• func DropdownMenu(props ...DropdownMenuProps) templ.Component
• func DropdownTrigger(props ...DropdownTriggerProps) templ.Component
• type DropdownContentProps
• type DropdownDividerProps
• type DropdownItemProps
• type DropdownMenuProps
• type DropdownProps
• type DropdownTriggerProps

Functions

func Dropdown

func Dropdown(props ...DropdownProps) templ.Component

Dropdown renders the main dropdown container.

This component renders Bulma's .dropdown class which creates the main container for interactive dropdown menus. By default requires JavaScript for click activation unless IsHoverable is used. Contains DropdownTrigger and DropdownMenu components. Perfect for navigation menus, action lists, and contextual options.

func DropdownContent

func DropdownContent(props ...DropdownContentProps) templ.Component

DropdownContent renders dropdown content containers.

This component renders Bulma's .dropdown-content class as a div element, which creates the white background container with shadow and border radius. Contains the actual dropdown items and dividers. Essential for proper dropdown styling and visual separation from page content.

func DropdownDivider

func DropdownDivider(props ...DropdownDividerProps) templ.Component

DropdownDivider renders horizontal separator lines.

This component renders Bulma's .dropdown-divider class as an hr element, which creates horizontal separator lines between dropdown items. Perfect for organizing menu items into logical groups and improving visual hierarchy within dropdown content.

func DropdownItem

func DropdownItem(props ...DropdownItemProps) templ.Component

DropdownItem renders individual dropdown menu items.

This component renders Bulma's .dropdown-item class as an anchor element, which creates individual selectable items within dropdown content. Features hover effects and active state styling. Can contain text, icons, or other inline content for menu options.

func DropdownMenu

func DropdownMenu(props ...DropdownMenuProps) templ.Component

DropdownMenu renders dropdown menu containers.

This component renders Bulma's .dropdown-menu class as a div element, which creates the toggleable menu container. Hidden by default and positioned absolutely when activated. Should have role="menu" and contain DropdownContent component with menu items.

func DropdownTrigger

func DropdownTrigger(props ...DropdownTriggerProps) templ.Component

DropdownTrigger renders dropdown activation triggers.

This component renders Bulma's .dropdown-trigger class as a div element, which contains the button that activates the dropdown. Should contain a button element with proper ARIA attributes (aria-haspopup, aria-controls).

Types

type DropdownContentProps

type DropdownContentProps struct {
	// Optional HTML id attribute for the dropdown content
	ID string

	// List of additional CSS classes to apply to the content container
	Class []string

	// Additional arbitrary HTML attributes
	Attributes templ.Attributes
}

DropdownContentProps defines configuration for dropdown content areas. Use this type to configure .dropdown-content elements which provide the styled container for dropdown items. Features white background, shadow, and border radius. Contains DropdownItem components.

type DropdownDividerProps

type DropdownDividerProps struct {
	// Optional HTML id attribute for the dropdown divider
	ID string

	// List of additional CSS classes to apply to the divider
	Class []string

	// Additional arbitrary HTML attributes
	Attributes templ.Attributes
}

DropdownDividerProps defines configuration for dropdown dividers. Use this type to configure .dropdown-divider elements which provide horizontal separator lines between groups of dropdown items. Helps organize menu items into logical sections.

type DropdownItemProps

type DropdownItemProps struct {
	// Optional HTML id attribute for the dropdown item
	ID string

	// List of additional CSS classes to apply to the item
	Class []string

	// Additional arbitrary HTML attributes
	Attributes templ.Attributes

	// Mark item as currently active/selected
	IsActive bool
}

DropdownItemProps defines configuration for individual dropdown items. Use this type to configure .dropdown-item elements which represent individual selectable options within dropdown menus. Can function as links or interactive elements with hover and active states.

type DropdownMenuProps

type DropdownMenuProps struct {
	// Optional HTML id attribute for the dropdown menu
	ID string

	// List of additional CSS classes to apply to the menu container
	Class []string

	// Additional arbitrary HTML attributes
	Attributes templ.Attributes
}

DropdownMenuProps defines configuration for dropdown menu containers. Use this type to configure .dropdown-menu elements which provide the toggleable menu container. Hidden by default and shown when dropdown becomes active. Should contain DropdownContent component.

type DropdownProps

type DropdownProps struct {
	// Optional HTML id attribute for the dropdown container
	ID string

	// List of additional CSS classes to apply to the dropdown
	Class []string

	// Additional arbitrary HTML attributes
	Attributes templ.Attributes

	// Right align the dropdown menu instead of left
	IsRight bool

	// Show dropdown menu (for programmatic control)
	IsActive bool

	// Enable hover activation instead of click
	IsHoverable bool

	// Apply selected styling to the dropdown
	IsSelected bool

	// Show dropdown menu above trigger (dropup)
	IsUp bool
}

DropdownProps defines configuration for dropdown container elements.

Use this type to configure Bulma .dropdown elements which create interactive dropdown menus for discoverable content. Dropdowns are composite components requiring trigger, menu, content, and item sub-components. Supports click-to-toggle or hover activation.

type DropdownTriggerProps

type DropdownTriggerProps struct {
	// Optional HTML id attribute for the dropdown trigger
	ID string

	// List of additional CSS classes to apply to the trigger container
	Class []string

	// Additional arbitrary HTML attributes
	Attributes templ.Attributes
}

DropdownTriggerProps defines configuration for dropdown trigger containers. Use this type to configure .dropdown-trigger elements which contain the button or element that activates the dropdown menu. Typically contains a button with appropriate ARIA attributes for accessibility.