Navbar

Updated Oct 16, 2026 v0.0.10

v0.0.10StableComponentStatelessJS-moduleApache-2.0

Installation mix mishka.ui.gen.component navbar

Source View Source

Overview of the Phoenix LiveView Navbar Component

The Mishka Navbar component is a Phoenix LiveView component that enables developers to create fully customizable and responsive navigation bars, perfect for enhancing user engagement. It offers flexible design options, allowing for adjustments in color, layout, and alignment, ensuring a seamless and professional appearance.

This Phoenix LiveView component supports multiple design variants such as default, shadow, and bordered, making it ideal for improving both the aesthetic and functionality of your application's navigation. With its responsive design and ease of customization, this navbar component enhances the usability and accessibility of your website's interface.

Base Color & Variant

heex

<.navbar id="navbar-1">
  <:start_content>
    <.link
      navigate="/path"
      class="flex items-center space-x-3 rtl:space-x-reverse mb-5 md:mb-0"
    >
      <img src="/path" class="hidden dark:block size-10" alt="" />
      <img src="/path" class="dark:hidden size-10" alt="" />
      <div class="text-xl font-semibold">
        Mishka
      </div>
    </.link>
  </:start_content>
  <:list><.link title="Mishak" navigate="/">Mishka</.link></:list>

  <:list><.link title="Mishak chelekom" navigate="/chelekom">Chelekom</.link></:list>

  <:list><.link title="Mishak blog" navigate="/blog">Blog</.link></:list>

  <:list><.link navigate="/chelekom/docs">Docs</.link></:list>
</.navbar>

Default Variant

The default style of the Mishka Chelekom navbar applies a solid background and border that change based on user interaction, making it perfect for delivering important notifications. With just a single setting, you can select from a range of color options, ensuring easy customization to match various design styles. Default variant have also white and dark colors which are the same colors in the dark and light mode.

Default Variant

heex

<.navbar id="navbar-2" variant="default" color="natural"></.navbar>
<.navbar id="navbar-3" variant="default" color="white"></.navbar>
<.navbar id="navbar-4" variant="default" color="primary"></.navbar>
<.navbar id="navbar-5" variant="default" color="secondary"></.navbar>
<.navbar id="navbar-6" variant="default" color="dark"></.navbar>
<.navbar id="navbar-7" variant="default" color="success"></.navbar>
<.navbar id="navbar-8" variant="default" color="warning"></.navbar>
<.navbar id="navbar-9" variant="default" color="danger"></.navbar>
<.navbar id="navbar-10" variant="default" color="info"></.navbar>
<.navbar id="navbar-11" variant="default" color="silver"></.navbar>
<.navbar id="navbar-12" variant="default" color="misc"></.navbar>
<.navbar id="navbar-13" variant="default" color="dawn"></.navbar>

Shadow Variant

The shadow variant of the Mishka Chelekom navbar is similar to the default variant, but it also includes a subtle shadow along with a border and white background in light mode.

Shadow Variant

heex

<.navbar id="navbar-14" color="natural" variant="shadow"></.navbar>
<.navbar id="navbar-15" color="primary" variant="shadow"></.navbar>
<.navbar id="navbar-16" color="secondary" variant="shadow"></.navbar>
<.navbar id="navbar-17" color="success" variant="shadow"></.navbar>
<.navbar id="navbar-18" color="warning" variant="shadow"></.navbar>
<.navbar id="navbar-19" color="danger" variant="shadow"></.navbar>
<.navbar id="navbar-20" color="info" variant="shadow"></.navbar>
<.navbar id="navbar-21" color="silver" variant="shadow"></.navbar>
<.navbar id="navbar-22" color="misc" variant="shadow"></.navbar>
<.navbar id="navbar-23" color="dawn" variant="shadow"></.navbar>

bordered Variant

The Bordered variant of the Mishka Chelekom navbar has lighter background and a border. Bordered variant have also white and dark colors which are the same colors in the dark and light mode.

bordered Variant

heex

<.navbar id="navbar-24" color="natural" variant="bordered"></.navbar>
<.navbar id="navbar-25" color="white" variant="bordered"></.navbar>
<.navbar id="navbar-26" color="primary" variant="bordered"></.navbar>
<.navbar id="navbar-27" color="secondary" variant="bordered"></.navbar>
<.navbar id="navbar-28" color="dark" variant="bordered"></.navbar>
<.navbar id="navbar-29" color="success" variant="bordered"></.navbar>
<.navbar id="navbar-30" color="warning" variant="bordered"></.navbar>
<.navbar id="navbar-31" color="danger" variant="bordered"></.navbar>
<.navbar id="navbar-32" color="info" variant="bordered"></.navbar>
<.navbar id="navbar-33" color="silver" variant="bordered"></.navbar>
<.navbar id="navbar-34" color="misc" variant="bordered"></.navbar>
<.navbar id="navbar-35" color="dawn" variant="bordered"></.navbar>

gradient Variant

The gradient variant of the Mishka Chelekom navbar has gradients in various colors.

gradient Variant

heex

<.navbar id="navbar-36" color="natural" variant="bordered"></.navbar>
<.navbar id="navbar-37" color="white" variant="bordered"></.navbar>
<.navbar id="navbar-38" color="primary" variant="bordered"></.navbar>
<.navbar id="navbar-39" color="secondary" variant="bordered"></.navbar>
<.navbar id="navbar-40" color="dark" variant="bordered"></.navbar>
<.navbar id="navbar-41" color="success" variant="bordered"></.navbar>
<.navbar id="navbar-42" color="warning" variant="bordered"></.navbar>
<.navbar id="navbar-43" color="danger" variant="bordered"></.navbar>
<.navbar id="navbar-44" color="info" variant="bordered"></.navbar>
<.navbar id="navbar-45" color="silver" variant="bordered"></.navbar>
<.navbar id="navbar-46" color="misc" variant="bordered"></.navbar>
<.navbar id="navbar-47" color="dawn" variant="bordered"></.navbar>

Rounded prop of Phoenix LiveView navbar Component

The rounded prop offers values like extra_small, small, medium, large, and extra_large. These values control the border radius of the navbar, allowing for different levels of rounding from subtle to more pronounced corners, depending on the design needs.

heex

<.navbar id="navbar-48" rounded="extra_small"></.navbar>
<.navbar id="navbar-49" rounded="small"></.navbar>
<.navbar id="navbar-50" rounded="medium"></.navbar>
<.navbar id="navbar-51" rounded="large"></.navbar>
<.navbar id="navbar-52" rounded="extra_large"></.navbar>

Border prop

The border prop offers values like extra_small, small, medium, large, and extra_large. These values control the border size of the navbars, allowing you to adjust the thickness to suit your design.

Border prop

heex

<.navbar id="navbar-53" border="extra_small"></.navbar>
<.navbar id="navbar-54" border="small"></.navbar>
<.navbar id="navbar-55" border="medium"></.navbar>
<.navbar id="navbar-56" border="large"></.navbar>
<.navbar id="navbar-57" border="extra_large"></.navbar>

Padding prop

The padding prop offers values such as extra_small, small, medium, large, and extra_large. These values control the padding around the content inside the navbars.

Padding prop

heex

<.navbar id="navbar-58" padding="extra_small"></.navbar>
<.navbar id="navbar-59" padding="small"></.navbar>
<.navbar id="navbar-60" padding="medium"></.navbar>
<.navbar id="navbar-61" padding="large"></.navbar>
<.navbar id="navbar-62" padding="extra_large"></.navbar>

Max width prop

The max_width attribute controls the maximum width of the navbar component, ensuring that the content stays within a defined boundary, which is especially useful for creating consistent layouts. By setting the max_width value, you can easily limit how wide the navbar can extend, maintaining a structured appearance across different screen sizes. This attribute allows the navbar to remain centered and visually balanced, enhancing the overall presentation of the component in any layout.

Max width prop

heex

<.navbar id="navbar-63" max_width="extra_small"></.navbar>
<.navbar id="navbar-64" max_width="small"></.navbar>
<.navbar id="navbar-65" max_width="medium"></.navbar>
<.navbar id="navbar-66" max_width="large"></.navbar>
<.navbar id="navbar-67" max_width="extra_large"></.navbar>

Text position prop

The text_position attribute controls the alignment of text within a component, ensuring that content is properly positioned based on the design needs. With options like left, right, and center, you can align text to the left, right, or center of the component, respectively. This flexibility allows developers to manage how textual content is presented, enhancing readability and improving the visual structure of the component. If no specific value is provided, a default alignment is applied, typically aligning the text to the left.

Text position prop

heex

<.navbar id="navbar-68" text_position="left"></.navbar>
<.navbar id="navbar-69" text_position="center"></.navbar>
<.navbar id="navbar-70" text_position="right"></.navbar>

Navbar font weight prop

The font_weight prop controls the font weight of the text. By setting this prop, you can determine how bold or light the text appears within the title section. The default value is font-normal. You can customize this value to apply different font weights, such as making the text lighter or bolder, depending on the visual style and emphasis you want to create for the navbar. This provides flexibility in ensuring the title stands out appropriately within the overall navbar layout.

heex

<.navbar id="navbar-71" font_weight="font-light"></.navbar>
<.navbar id="navbar-72" font_weight="font-bold"></.navbar>
<.navbar id="navbar-73" font_weight="font-medium"></.navbar>

Navbar link prop

The :link prop allows you to specify the destination URL that the navbar should navigate to when the logo is clicked.

heex

<.navbar id="navbar-74" link="/"></.navbar>

Logo in navbar component of Phoenix LiveView

By using the image prop, you can add your logo at the start position of the navbar, ensuring it grabs users' attention right away. With the image_class prop, you can apply custom styles to your logo, tailoring its appearance to fit your brand. Additionally, including a link is essential to make the logo interactive, allowing users to navigate back to the homepage or another specified page when they click on it.

heex

<.navbar id="navbar-75" link="/" image="/path" image_class="your_classes"></.navbar>

Navbar name prop

The name prop specifies the text that represents your brand in the navbar, making it easily identifiable to users. To ensure that the brand name is not only displayed but also functional, the link prop must be included.

heex

<.navbar id="navbar-76" link="/" image="/path" name="your_brand"></.navbar>

Navbar relative prop

The relative prop is a boolean attribute that, when set to true, adds a relative positioning to the navbar. This positioning is particularly useful for implementing dropdown menus, as it ensures that dropdown elements are positioned correctly in relation to the navbar. By enabling this prop, you can create a more dynamic and interactive user experience, allowing dropdowns to appear seamlessly beneath the corresponding navbar items.

Navbar relative prop

heex

<.navbar id="navbar-77" relative>
  <:list>
    <.dropdown id="navbar-menu" width="w-full" relative="md:relative" clickable space="small" rounded="large" padding="extra_small">
      <:trigger>
        <button class="text-start w-full block">Dropdown</button>
      </:trigger>

      <:content>
        <ul class="space-y-5">
          <li>
            <.dropdown id="navbar-menu-nested" width="w-full" position="right" nomobile clickable>
              <:trigger>
                <button class="py-1 px-2">dropdown nested</button>
              </:trigger>

              <:content>
                <ul class="space-y-5">
                  <li class="py-1 px-2">Docs</li>
                  <li class="py-1 px-2">Footer</li>
                </ul>
              </:content>
            </.dropdown>
          </li>
          <li class="py-1 px-2">Memory</li>
          <li class="py-1 px-2">Design</li>
          <li>
            <.dropdown id="navbar-menu-more" width="w-full" position="right" clickable space="small" rounded="large" padding="extra_small">
              <:trigger>
                <button class="py-1 px-2">Dropdown</button>
              </:trigger>

              <:content>
                <ul class="space-y-5">
                  <li class="py-1 px-2">Security</li>
                  <li class="py-1 px-2">Roadmap</li>
                </ul>
              </:content>
            </.dropdown>
          </li>
          <li class="py-1 px-2">Tabs</li>
          <li class="py-1 px-2">Lists</li>
        </ul>
      </:content>
    </.dropdown>
  </:list>
  <:list><.link title="Mishka" navigate="/">Mishka</.link></:list>
  <:list><.link title="Chelekom" navigate="/chelekom">Chelekom</.link></:list>
  <:list><.link title="Blog" navigate="/blog">Blog</.link></:list>
  <:list><.link navigate="/chelekom/docs">Docs</.link></:list>
</.navbar>

Navbar list slot

The list slot in the navbar allows you to create a customizable list of links, enhancing navigation. You can include multiple link components, and with attributes for icons and styling, you can tailor their appearance and functionality to suit your needs.

heex

<.navbar id="navbar-78">
  <:list><.link title="Mishka" navigate="/">Mishka</.link></:list>
  <:list><.link title="Chelekom" navigate="/chelekom">Chelekom</.link></:list>
  <:list><.link title="Blog" navigate="/blog">Blog</.link></:list>
  <:list><.link navigate="/chelekom/docs">Docs</.link></:list>
</.navbar>

Navbar start and end content slots

The start_content slot in the navbar allows you to insert content at the very beginning of the navbar layout. This is useful for including elements such as logos, icons, or any additional introductory items before the main inner_block and list slots. Similarly, the end_content slot allows you to append content at the very end of the navbar. This is ideal for elements like profile menus, buttons, or additional controls that should appear after the main inner_block and list slots.

By leveraging both start_content and end_content slots, you can achieve greater customization and flexibility in your navbar's structure, ensuring your navigation bar is tailored to your application's requirements.

Navbar start and end content slots

heex

<.navbar id="navbar-79"
  max_width="extra_large"
>
  <:start_content>
    <.link
      navigate={~p"/"}
      class="flex items-center space-x-3 rtl:space-x-reverse mb-5 md:mb-0"
    >
      <img src={~p"/images/mishka-logo-white.svg"} class="dark:hidden size-10" alt="" />
      <img src={~p"/images/mishka-logo.svg"} class="hidden dark:block size-10" alt="" />
      <div class="text-xl font-semibold">Mishka</div>
    </.link>
  </:start_content>

  <:list>
    <.link title="Mishak" navigate="/">Mishka</.link>
  </:list>

  <:list>
    <.link title="Mishak chelekom" navigate="/chelekom">Chelekom</.link>
  </:list>

  <:list>
    <.link title="Mishak blog" navigate="/blog">Blog</.link>
  </:list>

  <:list>
    <.link navigate="/chelekom/docs">Docs</.link>
  </:list>
</.navbar>

<.navbar id="navbar-80"
  max_width="extra_large"
>
  <:list>
    <.link title="Mishak" navigate="/">Mishka</.link>
  </:list>

  <:list>
    <.link title="Mishak chelekom" navigate="/chelekom">Chelekom</.link>
  </:list>

  <:list>
    <.link title="Mishak blog" navigate="/blog">Blog</.link>
  </:list>

  <:list>
    <.link navigate="/chelekom/docs">Docs</.link>
  </:list>

  <:end_content>
    <.link
      navigate={~p"/"}
      class="flex items-center space-x-3 rtl:space-x-reverse mb-5 md:mb-0"
    >
      <img src={~p"/images/mishka-logo-white.svg"} class="dark:hidden size-10" alt="" />
      <img src={~p"/images/mishka-logo.svg"} class="hidden dark:block size-10" alt="" />
      <div class="text-xl font-semibold">Mishka</div>
    </.link>
  </:end_content>
</.navbar>

Navbar list slot icon props

The icon attribute allows you to display an icon next to an item, enhancing its visual appeal. You can use the icon_class attribute to apply custom styles to the icon. Additionally, the icon_position attribute determines whether the icon appears at the start or end of the item.

heex

<.navbar id="navbar-81">
  <:list icon="hero-home" icon_class="your_classes">
    <.link title="Mishka" navigate="/">Mishka</.link>
  </:list>
  <:list icon="hero-wrench-screwdriver" icon_class="your_classes">
    <.link title="Chelekom" navigate="/chelekom">Chelekom</.link>
  </:list>
  <:list icon="hero-book-open" icon_class="your_classes">
    <.link title="Blog" navigate="/blog">Blog</.link>
  </:list>

  <!--Change order of text and icon by using icon_position prop -->
  <:list icon="hero-document" icon_class="your_classes" icon_position="end">
    <.link navigate="/chelekom/docs">Docs</.link>
  </:list>
</.navbar>

Content position prop

The content_position prop controls the horizontal alignment of content within the navbar by applying different justify-content classes to the wrapper. It accepts values like start, end, center, between, and around to distribute the content accordingly. The default value is between, which creates equal spacing between elements.

Content position prop

heex

<.navbar id="navbar-82" content_position="center">
  Mishka Chelekom Library
</.navbar>

Attributes

Name	Type	Default	Values	Required	Description
`id`	`string`	—	—	Yes	A unique identifier is used to manage state and interaction
`variant`	`string`	`base`	`defaultshadowborderedgradientbase`	No	Determines the style
`color`	`string`	`natural`	`basenaturalwhiteprimarysecondarydarksuccesswarningdangerinfosilvermiscdawn`	No	Determines color theme
`border`	`string`	`extra_small`	—	No	Determines border style
`text_position`	`string`	—	—	No	Determines the element's text position
`rounded`	`string`	—	`extra_smallsmallmediumlargeextra_largenone`	No	Determines the border radius
`max_width`	`string`	—	—	No	Determines the style of element max width
`content_position`	`string`	`between`	—	No	Determines the alignment of the element's content
`image`	`string`	—	—	No	Image displayed alongside of an item
`image_class`	`string`	—	—	No	Determines custom class for the image
`name`	`string`	—	—	No	Specifies the name of the element
`relative`	`boolean`	`false`	—	No	—
`link`	`string`	—	—	No	—
`space`	`string`	—	`extra_smallsmallmediumlargeextra_large`	No	Space between items
`font_weight`	`string`	`font-normal`	—	No	Determines custom class for the font weight
`padding`	`string`	`small`	`extra_smallsmallmediumlargeextra_largenone`	No	Determines padding for items
`class`	`any`	—	—	No	Custom CSS class for additional styling
`nav_wrapper_class`	`string`	—	—	No	Custom CSS class for nav wrapper
`link_class`	`string`	—	—	No	Custom CSS class for link
`list_wrapper_class`	`string`	—	—	No	Custom CSS class for list main wrapper
`list_class`	`string`	—	—	No	Custom CSS class for list ul
`rest`	`global`	—	—	No	Global attributes can define defaults which are merged with attributes provided by the caller

Slots

Name	Required	Description
`start_content`	No	—
`inner_block`	No	Inner block that renders HEEx content
`end_content`	No	—
`list`	No	—

Attributes of the start_content slot

Name	Type	Default	Values	Required	Description
`class`	`any`	—	—	No	Custom CSS class for additional styling

Attributes of the end_content slot

Name	Type	Default	Values	Required	Description
`class`	`any`	—	—	No	Custom CSS class for additional styling

Attributes of the list slot

Name	Type	Default	Values	Required	Description
`class`	`any`	—	—	No	Custom CSS class for additional styling
`padding`	`string`	—	—	No	Determines padding for items
`icon`	`string`	—	—	No	Icon displayed alongside of an item
`icon_class`	`string`	—	—	No	Determines custom class for the icon
`icon_position`	`string`	—	—	No	Determines icon position

Options

Each option takes one or more of its values, separated by commas.

Option	Values
`--variant`	`defaultshadowborderedgradientbase`
`--color`	`basenaturalwhiteprimarysecondarydarksuccesswarningdangerinfosilvermiscdawn`
`--padding`	`extra_smallsmallmediumlargeextra_largenone`
`--rounded`	`extra_smallsmallmediumlargeextra_largenone`
`--space`	`extra_smallsmallmediumlargeextra_large`
`--module`	A module name of your own

What it generates

Functions navbarheader

Helpers None

Generated with it icon

Command mix mishka.ui.gen.component navbar