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.
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.
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.
<.navbar color="natural"></.navbar> <.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="silver"></.navbar> <.navbar color="misc"></.navbar> <.navbar 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.
<.navbar color="natural" variant="shadow"></.navbar> <.navbar color="primary" variant="shadow"></.navbar> <.navbar color="secondary" 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="silver" variant="shadow"></.navbar> <.navbar color="misc" variant="shadow"></.navbar> <.navbar 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.
<.navbar color="natural" variant="bordered"></.navbar> <.navbar color="white" variant="bordered"></.navbar> <.navbar color="primary" variant="bordered"></.navbar> <.navbar color="secondary" variant="bordered"></.navbar> <.navbar color="dark" variant="bordered"></.navbar> <.navbar color="success" variant="bordered"></.navbar> <.navbar color="warning" variant="bordered"></.navbar> <.navbar color="danger" variant="bordered"></.navbar> <.navbar color="info" variant="bordered"></.navbar> <.navbar color="silver" variant="bordered"></.navbar> <.navbar color="misc" variant="bordered"></.navbar> <.navbar color="dawn" variant="bordered"></.navbar>
gradient Variant
The gradient variant of the Mishka Chelekom navbar has gradients in various colors.
<.navbar color="natural" variant="bordered"></.navbar> <.navbar color="white" variant="bordered"></.navbar> <.navbar color="primary" variant="bordered"></.navbar> <.navbar color="secondary" variant="bordered"></.navbar> <.navbar color="dark" variant="bordered"></.navbar> <.navbar color="success" variant="bordered"></.navbar> <.navbar color="warning" variant="bordered"></.navbar> <.navbar color="danger" variant="bordered"></.navbar> <.navbar color="info" variant="bordered"></.navbar> <.navbar color="silver" variant="bordered"></.navbar> <.navbar color="misc" variant="bordered"></.navbar> <.navbar 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.
<.navbar rounded="extra_small"></.navbar> <.navbar rounded="small"></.navbar> <.navbar rounded="medium"></.navbar> <.navbar rounded="large"></.navbar> <.navbar 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.
<.navbar border="extra_small"></.navbar> <.navbar border="small"></.navbar> <.navbar border="medium"></.navbar> <.navbar border="large"></.navbar> <.navbar 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.
<.navbar padding="extra_small"></.navbar> <.navbar padding="small"></.navbar> <.navbar padding="medium"></.navbar> <.navbar padding="large"></.navbar> <.navbar 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.
<.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>
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.
<.navbar text_position="left"></.navbar> <.navbar text_position="center"></.navbar> <.navbar 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.
<.navbar font_weight="font-silver"></.navbar> <.navbar font_weight="font-bold"></.navbar> <.navbar 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.
<.navbar 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.
<.navbar 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.
<.navbar 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> <: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>
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.
<.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>
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 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" /> <img src={~p"/images/mishka-logo.svg"} class="hidden dark:block size-10" /> <h1 class="text-xl font-semibold">Mishka</h1> </.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 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" /> <img src={~p"/images/mishka-logo.svg"} class="hidden dark:block size-10" /> <h1 class="text-xl font-semibold">Mishka</h1> </.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.
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>