Navigations
v0.0.10
The navigation components are the parts of a page that take people from one place to another: a breadcrumb trail, dropdown and mega menus, a navbar, a sidebar, a dock, pagination for long lists, scroll areas and a footer. The group also holds Stat, a block for a metric or KPI with a trend indicator, and Shape, which clips content to a squircle, a hexagon, a star or another shape with CSS alone.
Each one is a component for Phoenix, the web framework of the Elixir language, and is generated into your project as source code with one command, so you can read and change it like the rest of your app. The pages below show each component with examples and list the attributes, slots and generator options it takes.
- Breadcrumb ComponentStateless Show users where they are with a Phoenix LiveView breadcrumb: item slots take links, icons and titles, with color and size props and text or icon separators.
- Dropdown ComponentStatelessJS-moduleJS Dropdown menus for Phoenix LiveView with trigger and content slots, hover or click activation, smart positioning, plus color, border, size and width props.
- Mega Menu ComponentStatelessJS-module Full-width mega menu for Phoenix LiveView navbars, opened on hover or click from a trigger slot, with variants, colors, sizes, borders and a top gap prop.
- Menu ComponentStateless Menu wrapper for Phoenix LiveView that builds flat or nested navigation, including collapsible sub-menus, with padding and space props for the layout.
- Navbar ComponentStatelessJS-module Responsive Phoenix LiveView navbar with five variants, a logo via image, name and link props, a list slot for links, and start_content and end_content slots.
- Dock ComponentStateless Navigation dock for the bottom or top of the viewport in Phoenix LiveView. Static, sticky, fixed or floating pill, with icons, labels, badges and aria-current.
- Stat ComponentStateless Metric block for Phoenix LiveView dashboards: title, value, figure slot, up, down or neutral trend arrows and actions, plus stat_group for grouped layouts.
- Shape ComponentStateless Phoenix LiveView shape component that clips an image or any HEEx to 15 outlines such as squircle, hexagon, heart and star, with sizes and a half mode.
- Pagination ComponentStatelessJS-module Pagination for Phoenix LiveView with page numbers, ellipses, first, last, next and previous buttons, siblings and boundaries props, and on_select JS commands.
- Sidebar ComponentStatelessJS-moduleJS Collapsible sidebar for Phoenix LiveView with icon and label items, start or end placement, a minimize button, a small-screen toggle, and color variants.
- Scroll Area ComponentStatelessJS Scrollable regions in Phoenix LiveView with horizontal or vertical scrolling, keyboard, touch and screen reader support, and type, height and width props.
- Footer ComponentStateless Footer for Phoenix LiveView with default, outline, shadow, bordered, transparent and gradient variants, footer sections, and text position and padding props.