nixCodeX / elm-bootstrap / Bootstrap.Navbar

The navbar is a wrapper that positions branding, navigation, and other elements in a concise header. The navbar is designed to be responsive by default and made interactive with a tiny sprinkle of Elm.

import Bootstrap.Navbar as Navbar


-- You need to keep track of the view state for the navbar in your model
type alias Model =
    { navbarState : Navbar.State }

-- The navbar needs to know the initial window size, so the inital state for a navbar requires a command to be run by the Elm runtime
initialState : ( Model, Cmd Msg )
initialState =
    let
        ( navbarState, navbarCmd ) =
            Navbar.initialState NavbarMsg
    in
    ( { navbarState = navbarState }, navbarCmd )

-- Define a message for the navbar
type Msg
    = NavbarMsg Navbar.State

-- You need to handle navbar messages in your update function to step the navbar state forward
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        NavbarMsg state ->
            ( { model | navbarState = state }, Cmd.none )

view : Model -> Html Msg
view model =
    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.view model.navbarState

-- If you use animations as above or you use dropdowns in your navbar you need to configure subscriptions too
subscriptions : Model -> Sub Msg
subscriptions model =
    Navbar.subscriptions model.navbarState NavbarMsg

Navbar

view : State -> Config msg -> Html msg

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

config : (State -> msg) -> Config msg

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


type Config msg

Configuration information for describing the view of the Navbar

Options

withAnimation : Config msg -> Config msg

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.

primary : Config msg -> Config msg

Option to color menu using the primary color

secondary : Config msg -> Config msg

Option to color menu using the secondary color

success : Config msg -> Config msg

Option to color menu using the success color

info : Config msg -> Config msg

Option to color menu using the info color

warning : Config msg -> Config msg

Option to color menu using the warning color

danger : Config msg -> Config msg

Option to color menu using the danger color

light : Config msg -> Config msg

Use a light background color (with a dark text)

dark : Config msg -> Config msg

Use a dark background color (with a light text)

fixTop : Config msg -> Config msg

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

fixBottom : Config msg -> Config msg

Option to fix the menu to the bottom of the viewport

lightCustom : Color -> Config msg -> Config msg

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

darkCustom : Color -> Config msg -> Config msg

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

lightCustomClass : String -> Config msg -> Config msg

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

darkCustomClass : String -> Config msg -> Config msg

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

collapseSmall : Config msg -> Config msg

Collapse the menu at the small media breakpoint

collapseMedium : Config msg -> Config msg

Collapse the menu at the medium media breakpoint

collapseLarge : Config msg -> Config msg

Collapse the menu at the large media breakpoint

collapseExtraLarge : Config msg -> Config msg

Collapse the menu at the extra large media breakpoint

container : Config msg -> Config msg

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

attrs : List (Html.Attribute msg) -> Config msg -> Config msg

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

Brand

brand : List (Html.Attribute msg) -> List (Html msg) -> Config msg -> Config msg

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


type Brand msg

Opaque type representing a brand element

Menu items

items : List (Item msg) -> Config msg -> Config msg

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

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

itemLink : List (Html.Attribute msg) -> List (Html msg) -> Item msg

Create a menu item (as an a element)

itemLinkActive : List (Html.Attribute msg) -> List (Html msg) -> Item msg

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


type Item msg

Opaque type representing a selectable menu item

Dropdown menu

dropdown : { id : String, toggle : DropdownToggle msg, items : List (DropdownItem msg) } -> Item msg

Create a dropdown menu for use in a navbar

dropdownToggle : List (Html.Attribute msg) -> List (Html msg) -> DropdownToggle msg

Function to construct a toggle for a dropdown

dropdownItem : List (Html.Attribute msg) -> List (Html msg) -> DropdownItem msg

Creates an a element appropriate for use in a nav dropdown

dropdownDivider : DropdownItem msg

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

dropdownHeader : List (Html msg) -> DropdownItem msg

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


type DropdownToggle msg

Opaque type representing the toggle element for a dropdown menu


type DropdownItem msg

Opaque type representing an item in a dropdown menu

Custom items

customItems : List (CustomItem msg) -> Config msg -> Config msg

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".

textItem : List (Html.Attribute msg) -> List (Html msg) -> CustomItem msg

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

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

formItem : List (Html.Attribute msg) -> List (Html msg) -> CustomItem msg

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"]]
    ]

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

customItem : Html msg -> CustomItem msg

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!

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


type CustomItem msg

Opaque type representing a custom (inline) navbar item

State

initialState : (State -> msg) -> ( State, Platform.Cmd.Cmd msg )

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.


type State

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

Interactive elements and subscriptions

subscriptions : State -> (State -> msg) -> Platform.Sub.Sub msg

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.