widget.Navbar
What are widgets
This is a new feature designed to make DomWizard even easier to use — just as originally intended. Widgets are pluggable, highly customizable, styled components that users can easily integrate into their projects. The goal is to speed up development while maintaining flexibility and control.
Navbar
The Navbar widget should provide a responsive, pre-styled navigation bar component.
It must return a DomWizard element — nothing else should be returned.
The navbar should automatically adjust its layout based on the screen size:
on larger screens, it should display the links horizontally; on smaller screens, it should collapse into a hamburger menu.
Inputs
icon: string | DomElement (optional) — represents the logo or icon of the navbar; can be text, an image URL, or a custom elementtitle: string (optional) — the title or heading displayed next to the iconlinks: array — a list of link objects or widget.Item elements representing navigation optionsonLinkClick: function (optional) — callback function triggered when a navigation link is clicked; receives the clicked item’s text or value as an argumentstyles: object (optional) — allows overriding the default navbar container styleslinkStyles: object (optional) — allows customizing individual link stylesiconStyles: object (optional) — allows customizing the icon or logo stylestitleStyles: object (optional) — allows customizing the title styles
Responsive Behaviour
- On desktop view, the navbar should display the icon, title, and navigation links inline.
- On mobile view, it should collapse into a hamburger icon that toggles a dropdown menu containing the navigation links.
- The hamburger menu icon should be customizable, but a default one should be provided.
Example
const links = [
Item({ text: 'Home', onClick: () => console.log('Home clicked') }),
Item({ text: 'About' }),
Item({ text: 'Contact' }),
]
Navbar({
icon: '🌐',
title: 'DomWizard',
links,
onLinkClick: (link) => console.log(`${link} clicked`),
})The Navbar should maintain a clean and minimal design consistent with the DomWizard style.
It should be fully responsive, keyboard-accessible, and allow easy customisation of layout and appearance.
widget.Navbar
What are widgets
This is a new feature designed to make DomWizard even easier to use — just as originally intended. Widgets are pluggable, highly customizable, styled components that users can easily integrate into their projects. The goal is to speed up development while maintaining flexibility and control.
Navbar
The Navbar widget should provide a responsive, pre-styled navigation bar component.
It must return a DomWizard element — nothing else should be returned.
The navbar should automatically adjust its layout based on the screen size:
on larger screens, it should display the links horizontally; on smaller screens, it should collapse into a hamburger menu.
Inputs
icon: string | DomElement (optional) — represents the logo or icon of the navbar; can be text, an image URL, or a custom elementtitle: string (optional) — the title or heading displayed next to the iconlinks: array — a list of link objects orwidget.Itemelements representing navigation optionsonLinkClick: function (optional) — callback function triggered when a navigation link is clicked; receives the clicked item’s text or value as an argumentstyles: object (optional) — allows overriding the default navbar container styleslinkStyles: object (optional) — allows customizing individual link stylesiconStyles: object (optional) — allows customizing the icon or logo stylestitleStyles: object (optional) — allows customizing the title stylesResponsive Behaviour
Example
The Navbar should maintain a clean and minimal design consistent with the DomWizard style.
It should be fully responsive, keyboard-accessible, and allow easy customisation of layout and appearance.