Bottom Navigation
Bottom navigation provides a fixed bar at the bottom of the viewport so users can switch between primary app sections.
Items use label for the text and icon as a React node (<HomeIcon />). The bar is fixed to the bottom of the viewport and ships with md:hidden, so it’s intended for mobile widths only — the live preview uses a tall, narrow iframe so it stays visible on desktop docs.
Items use label for the text and icon as a component reference (HomeIcon, not <HomeIcon />). It is rendered through Vue’s dynamic component resolver (<component :is>). The bar is fixed to the bottom and ships with md:hidden.
Loading Code Block...Default
Section titled “Default”The bar expects between 2 and 4 items. Pass icons as
Loading Code Block...