The main view function for displaying a navbar.

Navbar.config NavbarMsg
    |> Navbar.withAnimation
    |> Navbar.brand [ href "#" ] [ text "Brand" ]
    |> Navbar.items
        [ Navbar.itemLink [ href "#" ] [ text "Item 1" ]
        , Navbar.itemLink [ href "#" ] [ text "Item 2" ]
        ]
    |> Navbar.customItems
        [ Navbar.textItem [] [ text "Some text" ] ]
    |> Navbar.view model.navbarState

• state Required view state the navbar uses to support interactive behavior
• config The view configuration that determines to look and feel of the navbar

Creates a default navbar view configuration. Providing a starting point to set up your navbar how you'd like.

Configuration information for describing the view of the Navbar

• options List of configuration options
• toMsg Message function used for stepping the viewstate of the navbar forward
• withAnimation Set to True if you wish the menu to slide up/down with an animation effect
• brand Optional brand element (typically a logo)
• items List of menu items that the user can select from
• customItems List of custom (inline) items that you may place to the right of the std. navigation items

Use a slide up/down animation for toggling the navbar menu when collapsed.

**NOTE: ** Do remember to set up the subscriptions function when using this option.

Option to color menu using the primary color

Option to color menu using the secondary color

Option to color menu using the success color

Option to color menu using the info color

Option to color menu using the warning color

Option to color menu using the danger color

Use a light background color (with a dark text)

Use a dark background color (with a light text)

Option to fix the menu to the top of the viewport

**Note: You probably need to add some margin-top to the content element following the navbar when using this option **

Option to fix the menu to the bottom of the viewport

Option to color menu using a light custom background color (see avh4/elm-color)

Option to color menu using a dark custom background color (see avh4/elm-color)

Option to color menu using a light custom background color defined by css class(es)

Option to color menu using a dark custom background color defined by css class(es)

Collapse the menu at the small media breakpoint

Collapse the menu at the medium media breakpoint

Collapse the menu at the large media breakpoint

Collapse the menu at the extra large media breakpoint

Use this option when you want a fixed width menu (typically because your main content is also configured to be fixed width)

Add a custom Html.Attribute to the navbar element using this function

Create a brand element for your navbar

Navbar.brand
    [ href "#" ]
    -- (and perhaps use onWithOptions for custom handling of clicks !)
    [ img [ src "assets/logo.svg" ] [ text "MyCompany" ] ]
    config

• attributes List of attributes
• children List of children
• config Navbar config record to add/modify brand for

Opaque type representing a brand element

Configure your navbar with a list of navigation links and/or dropdowns.

NOTE If you call this function several times, the last time "wins".

Create a menu item (as an a element)

• attributes List of attributes
• children List of children

Create a menu item that is styled as active (as an a element)

• attributes List of attributes
• children List of children

Opaque type representing a selectable menu item

Create a dropdown menu for use in a navbar

• config A record with the following properties
  • id A unique id for your dropdown. It's important, because it's used to keep track of the state of the dropdown!
  • toggle The main item (toggle) that toggles the dropdown menu up or down
  • items List of menu items for the dropdown

Function to construct a toggle for a dropdown

• attributes List of attributes
• children List of child elements

Creates an a element appropriate for use in a nav dropdown

• attributes List of attributes
• children List of child elements

Creates a divider element appropriate for use in dropdowns. Handy when you want to visually separate groups of menu items in a dropdown menu

Creates an header element appropriate for use in dropdowns. Handy when you want to provide a heading for a group of menu items in a dropdown menu

• children List of child elements

Opaque type representing the toggle element for a dropdown menu

Opaque type representing an item in a dropdown menu

You can add custom items to a navbar too. These are placed after any navigation items.

NOTE If you call this function several times, the last time "wins".

Create a custom inline text element, which will float to the right when the menu isn't collapsed

• attributes List of attributes
• children List of children

**Note: If you have multiple custom items you will need to provide spacing between them yourself **

Create a custom inline form element, which will float to the right when the menu isn't collapsed

Navbar.formItem []
    [ TextInput.text
        [ TextInput.small ]
    , Button.button
        [ Button.roleSuccess, Button.small]
        [ text "Submit"]]
    ]

• attributes List of attributes
• children List of children

**Note: If you have multiple custom items you will need to provide spacing between them yourself **

Create a completely custom item, which will float to the right when the menu isn't collapsed. You should ensure that you create inline elements or else your menu will break in unfortunate ways!

• attributes List of attributes
• children List of children

**Note: If you have multiple custom items you will need to provide spacing between them yourself **

Opaque type representing a custom (inline) navbar item

You need to call this function to initialize the view state for the navbar and store the state in your main model.

init : ( Model, Cmd Msg )
init =
    let
        ( navbarState, navCmd ) =
            Navbar.initialState NavbarMsg
    in
    ( { navbarState = navbarState }
    , navCmd
    )

The Cmd part is needed, because the navbar as implemented currently needs the window size. Hopefully a smoother solution can be devised in the future.

Opaque type representing the view state of the navbar and any navbar dropdown menus

To support animations and managing the state of dropdown you need to wire up this function in your main subscriptions function.

subscriptions : Model -> Sub Msg
subscriptions model =
    Navbar.subscriptions model.navbarState NavbarMsg

**Note: ** If you are NOT using dropdowns in your navbar AND you are using a navbar without animation you can skip this. But it's not that much work, so maybe you are better off doing it anyway.