Tabnav
The Tabnav component in the Punica CSS Framework offers a straightforward and stylish tabbed interface design. Similar to the Navbar component, it consists entirely of button elements. To create a tabbed navigation, simply add the
.tab
class to a container element, which will organize the buttons into a cohesive tab layout.
Bottom Position
Centered Tabs
Using helpers
Default Class Name | Combinators |
---|---|
tab |
.tab |
button |
.tab > .buttons > .button .tab > .button |
active |
.tab > .active.button |
bottom |
.bottom.tab |
Styles | Combinators |
success |
.success.tab |
warning |
.warning.tab |
error |
.error.tab |
dark |
.dark.tab |
Sizes | Combinators |
small |
.small.tab |