`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.

Module Contents¶

Classes¶

`Navbar`	Navigation Bar Component.
`NavbarBrand`	Navigation Bar Brand Component.
`NavbarContainer`	Navbar Container Component.
`NavbarLinks`	Navigation Bar Links Component.

API¶

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.

Notes:

This requires Bootsrap & Bootstrap icons library.

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='#' %}"},
    ],
{% 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.
**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()[source]¶

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

class duck.html.components.navbar.NavbarBrand(url: 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.
**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.
**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.

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.
**kwargs – Extra keyword arguments

Raises:

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

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

get_element()[source]¶

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

duck.html.components.navbar¶

Module Contents¶

Classes¶

API¶

`duck.html.components.navbar`¶