Navbar

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 unbordered, 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.

By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the appearance and behavior of the gallery, allowing for flexible design changes.

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.

<.navbar color="white"></.navbar>
<.navbar color="primary"></.navbar>
<.navbar color="secondary"></.navbar>
<.navbar color="dark"></.navbar>
<.navbar color="success"></.navbar>
<.navbar color="warning"></.navbar>
<.navbar color="danger"></.navbar>
<.navbar color="info"></.navbar>
<.navbar color="light"></.navbar>
<.navbar color="misc"></.navbar>
<.navbar color="dawn"></.navbar>

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.

<.navbar color="white" variant="shadow"></.navbar>
<.navbar color="primary" variant="shadow"></.navbar>
<.navbar color="secondary" variant="shadow"></.navbar>
<.navbar color="dark" variant="shadow"></.navbar>
<.navbar color="success" variant="shadow"></.navbar>
<.navbar color="warning" variant="shadow"></.navbar>
<.navbar color="danger" variant="shadow"></.navbar>
<.navbar color="info" variant="shadow"></.navbar>
<.navbar color="light" variant="shadow"></.navbar>
<.navbar color="misc" variant="shadow"></.navbar>
<.navbar color="dawn" variant="shadow"></.navbar>

The unbordered variant of the Mishka Chelekom navbar is similar to the default variant, but without border.

<.navbar color="white" variant="unbordered"></.navbar>
<.navbar color="primary" variant="unbordered"></.navbar>
<.navbar color="secondary" variant="unbordered"></.navbar>
<.navbar color="dark" variant="unbordered"></.navbar>
<.navbar color="success" variant="unbordered"></.navbar>
<.navbar color="warning" variant="unbordered"></.navbar>
<.navbar color="danger" variant="unbordered"></.navbar>
<.navbar color="info" variant="unbordered"></.navbar>
<.navbar color="light" variant="unbordered"></.navbar>
<.navbar color="misc" variant="unbordered"></.navbar>
<.navbar color="dawn" variant="unbordered"></.navbar>

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.

<.navbar rounded="extra_small"></.navbar>
<.navbar rounded="small"></.navbar>
<.navbar rounded="medium"></.navbar>
<.navbar rounded="large"></.navbar>
<.navbar rounded="extra_large"></.navbar>

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.

<.navbar border="extra_small"></.navbar>
<.navbar border="small"></.navbar>
<.navbar border="medium"></.navbar>
<.navbar border="large"></.navbar>
<.navbar border="extra_large"></.navbar>

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.

<.navbar padding="extra_small"></.navbar>
<.navbar padding="small"></.navbar>
<.navbar padding="medium"></.navbar>
<.navbar padding="large"></.navbar>
<.navbar padding="extra_large"></.navbar>

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.

<.navbar max_width="extra_small"></.navbar>
<.navbar max_width="small"></.navbar>
<.navbar max_width="medium"></.navbar>
<.navbar max_width="large"></.navbar>
<.navbar max_width="extra_large"></.navbar>

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.

<.navbar text_position="left"></.navbar>
<.navbar text_position="center"></.navbar>
<.navbar text_position="right"></.navbar>

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.

<.navbar font_weight="font-light"></.navbar>
<.navbar font_weight="font-bold"></.navbar>
<.navbar font_weight="font-medium"></.navbar>

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

<.navbar link="/"></.navbar>

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.

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

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.

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

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.

Mishka
- Docs
  
  Footer
- Memory
- Design
- Security
  
  Roadmap
- Tabs
- Lists
Chelekom
Blog
Docs

Home
List
Blog
Calendar
- Product Categories
- Customer Support
- About Us
- Contact
- Blog
- Privacy Policy
- Terms of Service
- Documentation
Mishka Chelekom

We provide a wide range of components tailored to meet various customer needs and preferences.
Booking
Partners
About

<.navbar relative>
  <:list>
    <.dropdown width="w-full" relative="md:relative" clickable>
      <.dropdown_trigger width="full" trigger_id="unique_id_1">
        <button class="text-start w-full block">Dropdown</button>
      </.dropdown_trigger>

      <.dropdown_content
        space="small"
        id="unique_id_1"
        rounded="large"
        width="large"
        padding="extra_small"
      >
        <ul class="space-y-5">
          <li>
            <.dropdown width="w-full" position="right" nomobile clickable>
              <.dropdown_trigger trigger_id="unique_id_2">
                <button class="py-1 px-2">dropdown nested</button>
              </.dropdown_trigger>

              <.dropdown_content
                id="unique_id_2"
                space="small"
                rounded="large"
                width="large"
                padding="extra_small"
              >
                <ul class="space-y-5">
                  <li class="py-1 px-2">Docs</li>
                  <li class="py-1 px-2">Footer</li>
                </ul>
              </.dropdown_content>
            </.dropdown>
          </li>
          <li class="py-1 px-2">Memory</li>
          <li class="py-1 px-2">Design</li>
          <li>
            <.dropdown width="w-full" position="right" clickable>
              <.dropdown_trigger trigger_id="unique_id_3">
                <button class="py-1 px-2">Dropdown</button>
              </.dropdown_trigger>

              <.dropdown_content
                id="unique_id_3"
                space="small"
                rounded="large"
                width="large"
                padding="extra_small"
              >
                <ul class="space-y-5">
                  <li class="py-1 px-2">Security</li>
                  <li class="py-1 px-2">Roadmap</li>
                </ul>
              </.dropdown_content>
            </.dropdown>
          </li>
          <li class="py-1 px-2">Tabs</li>
          <li class="py-1 px-2">Lists</li>
        </ul>
      </.dropdown_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>

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.

<.navbar>
  <: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>

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.

By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the appearance and behavior of the gallery, allowing for flexible design changes.

<.navbar>
  <:list icon="hero_icons" icon_class="your_classes">
    <.link title="Mishka" navigate="/">Mishka</.link>
  </:list>
  <:list icon="hero_icons" icon_class="your_classes">
    <.link title="Chelekom" navigate="/chelekom">Chelekom</.link>
  </:list>
  <:list icon="hero_icons" 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_icons" icon_class="your_classes" icon_position="end">
    <.link navigate="/chelekom/docs">Docs</.link>
  </:list>
</.navbar>

Name	Type	Required	Description
id	string	Yes	A unique identifier is used to manage state and interaction.
variant	string	No	Determines the style of the navbar. Values: default, shadow, unbordered.
color	string	No	Determines the color theme of the navbar. Values: white, primary, secondary, dark, success, warning, danger, info, light, misc, dawn.
border	string	No	Determines the border style of the navbar. Default is extra_small.
text_position	string	No	Determines the text positioning within the navbar.
rounded	string	No	Determines the border radius of the navbar. Accepts values from predefined sizes.
max_width	string	No	Determines the maximum width of the navbar.
content_position	string	No	Determines the alignment of the navbar's content. Default is between.
image	string	No	Image displayed alongside of an item.
image_class	string	No	Custom class for the image displayed.
name	string	No	Specifies the name of the navbar component.
relative	boolean	No	Determines if the navbar is positioned relatively.
link	string	No	Specifies a link associated with the navbar.
space	string	No	Space between items in the navbar.
font_weight	string	No	Determines the font weight of the navbar items. Default is font-normal.
padding	string	No	Determines padding for items in the navbar. Default is small.
class	string	No	Custom CSS class for additional styling of the navbar.

Name	Type	Options	Recommended?
`--variant`	string	default - shadow - unbordered	Yes
`--color`	string	white - primary - secondary - dark - success - warning - danger - info - light - misc - dawn	Yes
`--padding`	string	extra_small - small - medium - large - extra_large - none	Yes
`--rounded`	string	extra_small - small - medium - large - extra_large	Yes
`--space`	string	extra_small - small - medium - large - extra_large	Yes
`--only`	string	navbar	Yes
`--module`	string	Something	NO

Mishka

Overview of the Phoenix LiveView Navbar Component

Default Variant

Shadow Variant

Unbordered Variant

Rounded prop of Phoenix LiveView navbar Component

Border prop

Padding prop

Max width prop

Text position prop

Navbar font weight prop

Navbar link prop

Logo in navbar component of Phoenix LiveView

Navbar name prop

Navbar relative prop

Mishka Chelekom

Navbar list slot

Navbar list slot icon props

Navbar Component Props

Navbar CLI Arguments