ComboStrap UI - Navbar
Table of Contents
1 - About
The navbar component is the implementation of a top application bar via the bootstrap navbar.
Inside a navbar component, you can add:
- a group to group navigational element such as a dropdown menu
- a collapse container to group the element that will collapse
- a button
2 - Articles Related
3 - Syntax
<navbar breakpoint="lg" position="normal" align="left" theme="light">
where:
- breakpoint is one of the breakpoint code (xs,'sm, md, lg (Default), xl)
- position is one of normal (default), top (bottom is not yet supported)
- align defines the horizontal placement. Possible values: left(Default) or center
- theme defines the luminance of the text. You can specify light (default) or dark
The default background-color is a light background.
3.1 - Fixed-top
If you choose a fixed-top navbar, you need also to change a strap template styling parameter. See the dedicated page Top navigation bar made simple
4 - Example
4.1 - A navbar with two dropdown menu and the search box at the right
- No cache when developing the bar to be sure.
~~NOCACHE~~
- The start of the navbar.
<navbar breakpoint="sm">
<brand class="pt-0" title="Brand">
<icon name="desktop-mac-dashboard" /> Brandly
</brand>
- Collapse to indicate all elements that will collapse when the size of the screen is lower than the navbar breakpoint
<collapse>
- A group with expand=“true” to push the element that are not in the group at the right side of the page
<group expand="true">
- Two dropdown menu
<dropdown name="Call to Action" >
[[card|Card]]
[[button|Button]]
</dropdown>
<dropdown name="UI Box">
[[note|Note]]
[[card|Card]]
[[blockquote|Blockquote]]
</dropdown>
- The end of the group
</group>
- The search bar
<search class="mr-0 pr-0">
- The end of the element to collapse (ie we collapse all drop down and the search bar
</collapse>
</navbar>
- Output
4.2 - A dark navbar
<navbar theme="dark" background-color="dark" breakpoint="xs">
<brand title="ComboStrap Home">
<icon name="logo.svg" />
ComboStrap
</brand>
<collapse>
<group>
[[:start|Home]]
[[:start|Features]]
[[:changes|Release]]
Navbar text with an inline element
</group>
</collapse>
</navbar>