`duck.html.components.navbar`¶

Navigation Bar Component Module.

This module defines reusable components for creating a fully customizable navigation bar. It includes support for branding, navigation links, and a responsive design.

No external CSS/JS dependencies required (no Bootstrap).

Module Contents¶

Classes¶

`Navbar`	Navigation Bar Component.
`NavbarBrand`	Navigation Bar Brand Component.
`NavbarContainer`	Navbar Container Component.
`NavbarLinks`	Navigation Bar Links Component.
`NavbarToggler`	Mobile menu toggle button. Pure CSS hamburger icon — no icon library required.

Data¶

COLLAPSE_BREAKPOINT

API¶

duck.html.components.navbar.COLLAPSE_BREAKPOINT¶: ‘992px’

class duck.html.components.navbar.Navbar(element: Optional[str] = None, properties: Optional[Dict[str, str]] = None, props: Optional[Dict[str, str]] = None, style: Optional[Dict[str, str]] = None, inner_html: Optional[Union[str, str, float]] = None, children: Optional[List[duck.html.components.HtmlComponent]] = None, **kwargs)[source]¶

Bases: duck.html.components.InnerComponent

Navigation Bar Component.

This component represents a full navigation bar with a brand logo, navigation links, and a responsive toggler button for mobile screens.

No external dependencies (self-contained CSS + JS, no Bootstrap required).

Example Template Usage:

{% Navbar %}
    brand = {
        "image_source": "{% static 'images/logo.png' %}",
        "alt": "Duck Logo",
        "url": '{% resolve "home" fallback_url="#" %}',
        "text": "Duck logo"
    },
    links = [
        {"text": "Home", "url": "{% resolve 'home' fallback_url='#' %}"},
        {"text": "About", "url": "{% resolve 'about' fallback_url='#' %}"},
        {"text": "Services", "url": "{% resolve 'services' fallback_url='#' %}"},
        {"text": "Contact", "url": "{% resolve 'contact' fallback_url='#' %}"},
        {"text": "Consultation", "url": "{% resolve 'consultation' fallback_url='#' %}"},
        {"text": "Jobs", "url": "{% resolve 'jobs' fallback_url='#' %}"},
        {"text": "Get Started", "url": "{% resolve 'signup' fallback_url='#' %}", "highlight": True},
    ],
{% endNavbar %}

Initialization

Initialize an HTML component.

Parameters:

element – The HTML element tag name (e.g., textarea, input, button). Can be None, but make sure element is returned by get_element method.
accept_inner_html – Whether the HTML component accepts an inner body (e.g., inner-body-here).
inner_html – Inner html to add to the HTML component. Defaults to None.
properties – Dictionary for properties to initialize the component with.
props – Just same as properties argument (added for simplicity).
style – Dictionary for style to initialize the component with.
event_handlers – Events to automatically bind. Each dictionary maps an event name to its handler and may include additional keyword arguments forwarded to bind(), e.g. event_handlers=[{"click": on_button_click, **extra_kwargs}].
**kwargs – Extra keyword arguments

Raises:

HtmlComponentError – If ‘element’ is not a string or ‘inner_html’ is set but ‘accept_inner_html’ is False.

get_element() → str[source]¶

on_create()[source]¶: Initialize and configure the Navbar component.

class duck.html.components.navbar.NavbarBrand(url: str = None, text: str = None, *args, **kwargs)[source]¶

Bases: duck.html.components.link.Link

Navigation Bar Brand Component.

This component represents the brand section of the navigation bar. It is a clickable link that can contain a brand image, text, or both. It is primarily used within the Navbar component.

Parameters:

brand –

A dictionary containing brand details:

image_source (str): The URL of the brand image.
alt (str): Alternative text for the brand image.
url (str): The destination URL when the brand is clicked.
text (str): The text displayed next to the brand image.

Initialization

Initialize an HTML component.

Parameters:

element – The HTML element tag name (e.g., textarea, input, button). Can be None, but make sure element is returned by get_element method.
accept_inner_html – Whether the HTML component accepts an inner body (e.g., inner-body-here).
inner_html – Inner html to add to the HTML component. Defaults to None.
properties – Dictionary for properties to initialize the component with.
props – Just same as properties argument (added for simplicity).
style – Dictionary for style to initialize the component with.
event_handlers – Events to automatically bind. Each dictionary maps an event name to its handler and may include additional keyword arguments forwarded to bind(), e.g. event_handlers=[{"click": on_button_click, **extra_kwargs}].
**kwargs – Extra keyword arguments

Raises:

HtmlComponentError – If ‘element’ is not a string or ‘inner_html’ is set but ‘accept_inner_html’ is False.

add_navbar_image()[source]¶: Adds a brand image and optional text to the NavbarBrand component.

on_create()[source]¶: Initialize and configure the NavbarBrand component.

class duck.html.components.navbar.NavbarContainer(element: Optional[str] = None, properties: Optional[Dict[str, str]] = None, props: Optional[Dict[str, str]] = None, style: Optional[Dict[str, str]] = None, inner_html: Optional[Union[str, str, float]] = None, children: Optional[List[duck.html.components.HtmlComponent]] = None, **kwargs)[source]¶

Bases: duck.html.components.container.FlexContainer

Navbar Container Component.

This component wraps and organizes all elements inside the navigation bar, including branding, toggler buttons for mobile, and navigation links.

Initialization

Initialize an HTML component.

Parameters:

element – The HTML element tag name (e.g., textarea, input, button). Can be None, but make sure element is returned by get_element method.
accept_inner_html – Whether the HTML component accepts an inner body (e.g., inner-body-here).
inner_html – Inner html to add to the HTML component. Defaults to None.
properties – Dictionary for properties to initialize the component with.
props – Just same as properties argument (added for simplicity).
style – Dictionary for style to initialize the component with.
event_handlers – Events to automatically bind. Each dictionary maps an event name to its handler and may include additional keyword arguments forwarded to bind(), e.g. event_handlers=[{"click": on_button_click, **extra_kwargs}].
**kwargs – Extra keyword arguments

Raises:

HtmlComponentError – If ‘element’ is not a string or ‘inner_html’ is set but ‘accept_inner_html’ is False.

on_create()[source]¶: Initialize and configure the NavbarContainer component.

class duck.html.components.navbar.NavbarLinks(element: Optional[str] = None, properties: Optional[Dict[str, str]] = None, props: Optional[Dict[str, str]] = None, style: Optional[Dict[str, str]] = None, inner_html: Optional[Union[str, str, float]] = None, children: Optional[List[duck.html.components.HtmlComponent]] = None, **kwargs)[source]¶

Bases: duck.html.components.InnerComponent

Navigation Bar Links Component.

This component contains a list of navigation links displayed in the navbar.

Parameters:

links –

A list of dictionaries representing navigation links. Each dictionary should have:

text (str): The display text for the link.
url (str): The URL the link navigates to.
highlight (bool): Optional. Renders the link as an accented button instead of a plain nav link, e.g. for a “Sign Up” call to action as the last link. Defaults to False.

Initialization

Initialize an HTML component.

Parameters:

element – The HTML element tag name (e.g., textarea, input, button). Can be None, but make sure element is returned by get_element method.
accept_inner_html – Whether the HTML component accepts an inner body (e.g., inner-body-here).
inner_html – Inner html to add to the HTML component. Defaults to None.
properties – Dictionary for properties to initialize the component with.
props – Just same as properties argument (added for simplicity).
style – Dictionary for style to initialize the component with.
event_handlers – Events to automatically bind. Each dictionary maps an event name to its handler and may include additional keyword arguments forwarded to bind(), e.g. event_handlers=[{"click": on_button_click, **extra_kwargs}].
**kwargs – Extra keyword arguments

Raises:

HtmlComponentError – If ‘element’ is not a string or ‘inner_html’ is set but ‘accept_inner_html’ is False.

HIGHLIGHT_LINK_STYLE¶: None

LINK_STYLE¶: None

add_links()[source]¶: Adds navigation links to the component.

get_element() → str[source]¶

on_create()[source]¶: Initialize and configure the NavbarLinks component.

class duck.html.components.navbar.NavbarToggler(element: Optional[str] = None, properties: Optional[Dict[str, str]] = None, props: Optional[Dict[str, str]] = None, style: Optional[Dict[str, str]] = None, inner_html: Optional[Union[str, str, float]] = None, children: Optional[List[duck.html.components.HtmlComponent]] = None, **kwargs)[source]¶

Bases: duck.html.components.button.FlatButton

Mobile menu toggle button. Pure CSS hamburger icon — no icon library required.

Initialization

Initialize an HTML component.

Parameters:

element – The HTML element tag name (e.g., textarea, input, button). Can be None, but make sure element is returned by get_element method.
accept_inner_html – Whether the HTML component accepts an inner body (e.g., inner-body-here).
inner_html – Inner html to add to the HTML component. Defaults to None.
properties – Dictionary for properties to initialize the component with.
props – Just same as properties argument (added for simplicity).
style – Dictionary for style to initialize the component with.
event_handlers – Events to automatically bind. Each dictionary maps an event name to its handler and may include additional keyword arguments forwarded to bind(), e.g. event_handlers=[{"click": on_button_click, **extra_kwargs}].
**kwargs – Extra keyword arguments

Raises:

HtmlComponentError – If ‘element’ is not a string or ‘inner_html’ is set but ‘accept_inner_html’ is False.

on_create()[source]¶

duck.html.components.navbar¶

Module Contents¶

Classes¶

Data¶

API¶

`duck.html.components.navbar`¶