Bootstrap 5 Navbar Component
A responsive navigation bar that can be customized with various styles and positions.
Parameters:
- style: string - Navbar style theme ('light' or 'dark', default: 'light') (optional)
- bg: string - Background color variant (primary, secondary, light, dark, etc., default: 'light') (optional)
- expand: string - Breakpoint for navbar expansion (sm, md, lg, xl, xxl, default: 'md') (optional)
- position: string - Navbar position ('fixed-top', 'fixed-bottom', 'sticky-top') (optional)
- class: string - Additional CSS classes (optional)
- fluid: boolean - Whether to use fluid container width (optional)
- id: string - Custom ID for the navbar collapse element (default: 'navbarCollapse') (optional)
- items_class: string - Additional CSS classes for the navbar items container (optional)
Brand Parameters:
- brand.text: string - Brand text to display (optional)
- brand.url: string - Brand link URL (default: '#!') (optional)
- brand.image.src: string - Brand image source URL (optional)
- brand.image.alt: string - Brand image alt text (optional)
- brand.image.height: number - Brand image height in pixels (default: 24) (optional)
Navigation Items Parameters:
- items: array - List of navigation items (optional)
- text: string - Item text
- url: string - Item URL (default: '#!') (optional)
- active: boolean - Whether item is active (optional)
- disabled: boolean - Whether item is disabled (optional)
- icon: string - Optional icon HTML or class (can be raw HTML from icon component, or a class like 'bi bi-house') (optional)
- class: string - Additional CSS classes for the item (optional)
- style: string - Inline CSS style for the item (optional)
- target: string - Link target attribute (e.g., '_blank', '_self', default: none) (optional)
- title: string - Link title attribute for tooltip or accessibility (optional)
- dropdown: array - Optional dropdown menu items (optional)
- text: string - Dropdown item text
- url: string - Dropdown item URL (default: '#!') (optional)
- active: boolean - Whether dropdown item is active (optional)
- disabled: boolean - Whether dropdown item is disabled (optional)
- target: string - Link target attribute for dropdown item (e.g., '_blank', '_self', default: none) (optional)
- title: string - Link title attribute for dropdown item (optional)
- icon: string - Optional icon HTML or class for dropdown item (can be raw HTML from icon component, or a class like 'bi bi-house') (optional)
- class: string - Additional CSS classes for the dropdown item (optional)
- style: string - Inline CSS style for the dropdown item (optional)
- divider: boolean - Add a divider instead of an item (optional)
Search Form Parameters:
- search: boolean|object - Enable search form and its options (optional)
- placeholder: string - Search input placeholder (default: 'Search') (optional)
- label: string - Search input aria-label (default: 'Search') (optional)
- button_text: string - Search button text (default: 'Search') (optional)
- button_variant: string - Button style variant (default: 'outline-success') (optional)
All available options for the Navbar component
ThemedComponent::make("navigation/navbar")
->active('value') //boolean - Whether dropdown item is active (optional)
->addAttribute('value') //Add an attribute to the element. This is a string like 'data-foo="bar"' or multiple attributes in a single string like 'data-foo="bar" data-bar="baz"' (optional)
->addCss('value') //string - Add css styles to the element. This should be '<style> custom-class {...} </style>' (optional)
->addJavaScript('value') //string - Add a script to the element. This is a string like '<script>console.log('Hello World!')</script>' (optional)
->bg('value') //string - Background color variant (primary, secondary, light, dark, etc., default: 'light') (optional)
->button_text('value') //string - Search button text (default: 'Search') (optional)
->button_variant('value') //string - Button style variant (default: 'outline-success') (optional)
->canSee('value') //bool - Whether the component should be visible or not (optional)
->class('value') //string - Additional CSS classes for the dropdown item (optional)
->disabled('value') //boolean - Whether dropdown item is disabled (optional)
->divider('value') //boolean - Add a divider instead of an item (optional)
->dropdown('value') //array - Optional dropdown menu items (optional)
->expand('value') //string - Breakpoint for navbar expansion (sm, md, lg, xl, xxl, default: 'md') (optional)
->fluid('value') //boolean - Whether to use fluid container width (optional)
->icon('value') //string - Optional icon HTML or class for dropdown item (can be raw HTML from icon component, or a class like 'bi bi-house') (optional)
->id('value') //string - The id of the element. If no id is supplied, a random one will be generated (optional)
->items('value') //array - List of navigation items (optional)
->items_class('value') //string - Additional CSS classes for the navbar items container (optional)
->label('value') //string - Search input aria-label (default: 'Search') (optional)
->placeholder('value') //string - Search input placeholder (default: 'Search') (optional)
->position('value') //string - Navbar position ('fixed-top', 'fixed-bottom', 'sticky-top') (optional)
->search('value') //boolean|object - Enable search form and its options (optional)
->style('value') //string - Inline CSS style for the dropdown item (optional)
->target('value') //string - Link target attribute for dropdown item (e.g., '_blank', '_self', default: none) (optional)
->text('value') //string - Dropdown item text
->title('value') //string - Link title attribute for dropdown item (optional)
->url('value') //string - Dropdown item URL (default: '#!') (optional)
->render();
Example of how to use the navbar component
ThemedComponent::make('navigation/navbar')
->brand([
'text' => 'Docs',
'url' => 'index.php'
])
->style('dark')
->bg('dark')
->container(true)
->expand('md')
->collapse([
'id' => 'navbarCollapse'
])
->items([
[
'text' => 'Home',
'url' => '#!'
],
[
'text' => 'Features',
'url' => '#!'
],
[
'text' => 'Dropdown',
'dropdown' => [
[
'text' => 'Dropdown Item 1',
'url' => '#!'
],
[
'text' => 'Dropdown Item 2',
'url' => '#!'
],
[
'text' => 'Dropdown Item 3',
'url' => '#!'
],
],
]
])
->class('mb-2 mb-md-0')
->render();The Twig template file for the Navbar component
{#
Bootstrap 5 Navbar Component
A responsive navigation bar that can be customized with various styles and positions.
Parameters:
- style: string - Navbar style theme ('light' or 'dark', default: 'light') (optional)
- bg: string - Background color variant (primary, secondary, light, dark, etc., default: 'light') (optional)
- expand: string - Breakpoint for navbar expansion (sm, md, lg, xl, xxl, default: 'md') (optional)
- position: string - Navbar position ('fixed-top', 'fixed-bottom', 'sticky-top') (optional)
- class: string - Additional CSS classes (optional)
- fluid: boolean - Whether to use fluid container width (optional)
- id: string - Custom ID for the navbar collapse element (default: 'navbarCollapse') (optional)
- items_class: string - Additional CSS classes for the navbar items container (optional)
Brand Parameters:
- brand.text: string - Brand text to display (optional)
- brand.url: string - Brand link URL (default: '#!') (optional)
- brand.image.src: string - Brand image source URL (optional)
- brand.image.alt: string - Brand image alt text (optional)
- brand.image.height: number - Brand image height in pixels (default: 24) (optional)
Navigation Items Parameters:
- items: array - List of navigation items (optional)
- text: string - Item text
- url: string - Item URL (default: '#!') (optional)
- active: boolean - Whether item is active (optional)
- disabled: boolean - Whether item is disabled (optional)
- icon: string - Optional icon HTML or class (can be raw HTML from icon component, or a class like 'bi bi-house') (optional)
- class: string - Additional CSS classes for the item (optional)
- style: string - Inline CSS style for the item (optional)
- target: string - Link target attribute (e.g., '_blank', '_self', default: none) (optional)
- title: string - Link title attribute for tooltip or accessibility (optional)
- dropdown: array - Optional dropdown menu items (optional)
- text: string - Dropdown item text
- url: string - Dropdown item URL (default: '#!') (optional)
- active: boolean - Whether dropdown item is active (optional)
- disabled: boolean - Whether dropdown item is disabled (optional)
- target: string - Link target attribute for dropdown item (e.g., '_blank', '_self', default: none) (optional)
- title: string - Link title attribute for dropdown item (optional)
- icon: string - Optional icon HTML or class for dropdown item (can be raw HTML from icon component, or a class like 'bi bi-house') (optional)
- class: string - Additional CSS classes for the dropdown item (optional)
- style: string - Inline CSS style for the dropdown item (optional)
- divider: boolean - Add a divider instead of an item (optional)
Search Form Parameters:
- search: boolean|object - Enable search form and its options (optional)
- placeholder: string - Search input placeholder (default: 'Search') (optional)
- label: string - Search input aria-label (default: 'Search') (optional)
- button_text: string - Search button text (default: 'Search') (optional)
- button_variant: string - Button style variant (default: 'outline-success') (optional)
#}
<nav class="navbar navbar-{{ content.style|default('light') }} bg-{{ content.bg|default('light') }} navbar-expand-{{ content.expand|default('md') }}{% if content.position %} {{ content.position }}{% endif %}{% if content.class %} {{ content.class }}{% endif %}">
<div class="container{% if content.fluid %}-fluid{% endif %}">
{% if content.brand %}
<a class="navbar-brand" href="{{ content.brand.url|default('#!') }}">
{% if content.brand.image %}
<img src="{{ content.brand.image.src }}"
alt="{{ content.brand.image.alt|default('') }}"
height="{{ content.brand.image.height|default(24) }}"
class="d-inline-block align-text-top">
{% endif %}
{{ content.brand.text }}
</a>
{% endif %}
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#{{ content.id|default('navbarCollapse') }}" aria-controls="{{ content.id|default('navbarCollapse') }}" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="{{ content.id|default('navbarCollapse') }}">
{% if content.items %}
<ul class="navbar-nav me-auto mb-2 mb-md-0{% if content.items_class %} {{ content.items_class }}{% endif %}">
{% for item in content.items %}
{% if item.active|default(false) %} active {% endif %}
{% if item.disabled|default(false) %} disabled {% endif %}
{% if item.target %} target="{{ item.target }}" {% endif %}
{% if item.title %} title="{{ item.title }}" {% endif %}
{% if item.class %} class="{{ item.class }}" {% endif %}
{% if item.style %} style="{{ item.style }}" {% endif %}
<li class="nav-item{% if item.dropdown %} dropdown{% endif %}{% if item_class %} {{ item_class }}{% endif %}"{{ item_style }}>
{% if item.dropdown %}
<a class="nav-link dropdown-toggle{{ is_active }}{{ is_disabled }}" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"{{ item_title }}>
{% if item.icon %} {{ item.icon|raw }} {% endif %}
{% if item.text %} {{ item.text }} {% endif %}
</a>
<ul class="dropdown-menu">
{% for dropdown_item in item.dropdown %}
{% if dropdown_item.divider|default(false) %}
<li><hr class="dropdown-divider"></li>
{% else %}
{% if dropdown_item.active|default(false) %} active {% endif %}
{% if dropdown_item.disabled|default(false) %} disabled {% endif %}
{% if dropdown_item.target %} target="{{ dropdown_item.target }}" {% endif %}
{% if dropdown_item.title %} title="{{ dropdown_item.title }}" {% endif %}
{% if dropdown_item.class %} class="{{ dropdown_item.class }}" {% endif %}
{% if dropdown_item.style %} style="{{ dropdown_item.style }}" {% endif %}
<li><a class="dropdown-item{{ dropdown_active }}{{ dropdown_disabled }}{% if dropdown_class %} {{ dropdown_class }}{% endif %}" href="{{ dropdown_item.url|default('#!') }}"{{ dropdown_target }}{{ dropdown_title }}{{ dropdown_style }}>
{% if dropdown_item.icon %} {{ dropdown_item.icon|raw }} {% endif %}
{% if dropdown_item.text %} {{ dropdown_item.text }} {% endif %}
</a></li>
{% endif %}
{% endfor %}
</ul>
{% else %}
<a class="nav-link{{ is_active }}{{ is_disabled }}" href="{{ item.url|default('#!') }}"{{ item_target }}{{ item_title }}>
{% if item.icon %} {{ item.icon|raw }} {% endif %}
{% if item.text %} {{ item.text }} {% endif %}
</a>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% if content.search %}
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="{{ content.search.placeholder|default('Search') }}" aria-label="{{ content.search.label|default('Search') }}">
<button class="btn btn-{{ content.search.button_variant|default('outline-success') }}" type="submit">{{ content.search.button_text|default('Search') }}</button>
</form>
{% endif %}
</div>
</div>
</nav>