PhiaUi.Components.Layout.FixedBar (phia_ui v0.1.17)

Fixed-positioned bar anchored to the top or bottom of the viewport.

Spans the full width of the viewport (inset-x-0) and sits above page content via a configurable z-index. Useful for mobile CTA bars, persistent navigation, or cookie-consent banners.

Examples

<%!-- Fixed top navigation --%>
<.fixed_bar position={:top} z={50}>
  <div class="max-w-screen-xl mx-auto px-4 flex items-center justify-between h-16">
    <span class="font-bold">Logo</span>
    <nav>...</nav>
  </div>
</.fixed_bar>

<%!-- Mobile bottom CTA --%>
<.fixed_bar position={:bottom} class="p-4">
  <.button class="w-full">Buy now</.button>
</.fixed_bar>

Summary

Functions

fixed_bar(assigns)

Renders a fixed-positioned full-width bar.

Functions

fixed_bar(assigns)

Renders a fixed-positioned full-width bar.

Attributes

position (:atom) - Viewport edge to anchor to. Defaults to :bottom. Must be one of :top, or :bottom.
z (:integer) - z-index level. Defaults to 40. Must be one of 0, 10, 20, 30, 40, or 50.
class (:string) - Additional CSS classes merged via cn/1. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the root element.

Slots

inner_block (required) - Bar content.