The bottom bar component can be used to allow menu items and certain control actions to be performed by the user through the usage of a fixed bar positioning to the bottom side of your page.
Check out multiple examples of the bottom navigation component based on various styles, controls, sizes, content and leverage the utility classes from Tailwind CSS to integrate into your own project.
Setup # Default bottom navigation #Use the default bottom navigation bar example to show a list of menu items as buttons to allow the user to navigate through your website based on a fixed position. You can also use anchor tags instead of buttons.
Adding links and active class #Utilize the href prop within the BottomNavItem component to incorporate a hyperlink. To initiate the application of the active class, include the activeUrl prop within the BottomNav component.
By default, the BottomNavItem will only be set to active if the href and the activeUrl are exactly the same.
The following example shows how to change active class, by using activeClass prop.
Use the following example to change the icon colors:
Menu items with border #This example can be used to show a border between the menu items inside the bottom navbar.
Application bar example #Use this example to show a CTA button in the center of the navigation component to create new items.
Example with pagination #This example be used to paginate multiple pages on a single view alongside other menu items.
Button group bottom bar # Card with bottom bar #This example can be used to position a bottom navigation bar inside of a card element with scroll enabled on the Y axis to allow changing the content inside of the card, enable certain actions or show a list of menu items.
You can even use the other bottom navbar examples to exchange the default one presented here.
Component data #The component has the following props, type, and default values. See types page for type information.
References #RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4