animaltrack/docs/vendor/monsterui/api_ref/docs_navigation.md

Navigation (Nav, NavBar, Tabs, etc.) API Reference

Nav, NavBar, DowDownNav, and Tab examples

---

Nav

See Source

See Output

• Option 1
• Option 2
• Option 3

[code]

def ex_nav1():
    mbrs1 = [Li(A('Option 1'), cls='uk-active'), Li(A('Option 2')), Li(A('Option 3'))]
    return NavContainer(*mbrs1)

[/code]

See Source

See Output

• NavHeaderLi
• Option 1
• Option 2
• Option 3
• Subtitle Ex

NavSubtitle text to be shown

• • Parent Name * Child 1 * Child 2 * Child 3

[code]

def ex_nav2():
    mbrs1 = [Li(A('Option 1'), cls='uk-active'), Li(A('Option 2')), Li(A('Option 3'))]
    mbrs2 = [Li(A('Child 1')), Li(A('Child 2')),Li(A('Child 3'))]

    return NavContainer(
        NavHeaderLi("NavHeaderLi"),
        *mbrs1,
        Li(A(href='')(Div("Subtitle Ex",NavSubtitle("NavSubtitle text to be shown")))),
        NavDividerLi(),
        NavParentLi(
            A('Parent Name'),
            NavContainer(*mbrs2,parent=False),
             ),
    )

[/code]

Navbars

Fully responsive simple navbar using the high level API. This will collapse to a hamburger menu on mobile devices. See the Scrollspy example for a more complex navbar example.

See Source

See Output

My Blog

Page1Page2Page3

Page1Page2Page3

[code]

def ex_navbar1():
    return NavBar(A("Page1",href='/rt1'),
                  A("Page2",href='/rt2'),
                  A("Page3",href='/rt3'),
                  brand=H3('My Blog'))

[/code]

See Source

See Output

Page1Page2

Page1Page2

[code]

def ex_navbar2():    
    return NavBar(
        A(Input(placeholder='search')), 
        A(UkIcon("rocket")), 
        A('Page1',href='/rt1'), 
        A("Page2", href='/rt3'),
        brand=DivLAligned(Img(src='/api_reference/logo.svg'),UkIcon('rocket',height=30,width=30)))

[/code]

Drop Down Navs

See Source

See Output

Open DropDown

• Item 1
• Item 2

[code]

def ex_navdrop():
    return Div(
        Button("Open DropDown"),
        DropDownNavContainer(Li(A("Item 1",href=''),Li(A("Item 2",href='')))))

[/code]

Tabs

See Source

See Output

• Active
• Item
• Item
• Disabled

[code]

def ex_tabs2():
    return Container(
        TabContainer(
            Li(A("Active",href='javascript:void(0);', cls='uk-active')),
            Li(A("Item",href='javascript:void(0);')),
            Li(A("Item",href='javascript:void(0);')),
            Li(A("Disabled", cls='uk-disabled'))))

[/code]

A tabs can use any method of navigation (htmx, or href). However, often these are use in conjunction with switchers do to this client side

See Source

See Output

• Active

• Item

• Item

• Disabled

• Tab 1

• Tab 2

• Tab 3

[code]

def ex_tabs1():
    return Container(
        TabContainer(
            Li(A("Active",href='#', cls='uk-active')),
            Li(A("Item",href='#')),
            Li(A("Item",href='#')),
            Li(A("Disabled",href='#', cls='uk-disabled')),
            uk_switcher='connect: #component-nav; animation: uk-animation-fade',
            alt=True),
         Ul(id="component-nav", cls="uk-switcher")(
            Li(H1("Tab 1")),
            Li(H1("Tab 2")),
            Li(H1("Tab 3"))))

[/code]

API Docs

NavBar

Source

[code]

NavBar(*c, brand=h3(('Title',),{'class': 'uk-h3 '}), right_cls='items-center space-x-4', mobile_cls='space-y-4', sticky: bool = False, uk_scrollspy_nav: bool | str = False, cls='p-4', scrollspy_cls=<ScrollspyT.underline: 'navbar-underline'>, menu_id=None) -> fastcore.xml.FT

[/code]

Creates a responsive navigation bar with mobile menu support

Params

• c Component for right side of navbar (Often A tag links)

• brand Brand/logo component for left side

• right_cls Spacing for desktop links

• mobile_cls Spacing for mobile links

• sticky Whether to stick to the top of the page while scrolling

• uk_scrollspy_nav Whether to use scrollspy for navigation

• cls Classes for navbar

• scrollspy_cls Scrollspy class (usually ScrollspyT.*)

• menu_id ID for menu container (used for mobile toggle)

Returns: Responsive NavBar

TabContainer

Source

[code]

TabContainer(*li, cls='', alt=False, **kwargs) -> fastcore.xml.FT

[/code]

A TabContainer where children will be different tabs

Params

• li Components

• cls Additional classes on the Ul

• alt Whether to use an alternative tab style

• kwargs

Returns: Tab container

NavContainer

Source

[code]

NavContainer(*li, cls=<NavT.primary: 'uk-nav-primary'>, parent=True, uk_nav=False, uk_scrollspy_nav=False, sticky=False, **kwargs) -> fastcore.xml.FT

[/code]

Creates a navigation container (useful for creating a sidebar navigation). A Nav is a list (NavBar is something different)

Params

• li List items are navigation elements (Special Li such as NavParentLi, NavDividerLi, NavHeaderLi, NavSubtitle, NavCloseLi can also be used)

• cls Additional classes on the nav

• parent Whether this nav is a parent or sub nav

• uk_nav True for default collapsible behavior, see frankenui docs for more advanced options

• uk_scrollspy_nav Activates scrollspy linking each item A tags href to content's id attribute

• sticky Whether to stick to the top of the page while scrolling

• kwargs

Returns: FT Component that is a list of Li styled for a sidebar navigation menu

---

NavT

__

Option	Value	Option	Value
default	uk-nav-default	primary	uk-nav-primary
secondary	uk-nav-secondary

NavCloseLi

Source

[code]

NavCloseLi(*c, cls=(), **kwargs) -> fastcore.xml.FT

[/code]

Creates a navigation list item with a close button

Params

• c Components

• cls Additional classes on the li

• kwargs

Returns: Navigation list item with a close button

NavSubtitle

Source

[code]

NavSubtitle(*c, cls=<TextPresets.muted_sm: 'text-gray-500 dark:text-gray-200 text-sm'>, **kwargs) -> fastcore.xml.FT

[/code]

Creates a navigation subtitle

Params

• c Components

• cls Additional classes on the div

• kwargs

Returns: Navigation subtitle

NavHeaderLi

Source

[code]

NavHeaderLi(*c, cls=(), **kwargs) -> fastcore.xml.FT

[/code]

Creates a navigation list item with a header

Params

• c Components

• cls Additional classes on the li

• kwargs

Returns: Navigation list item with a header

NavDividerLi

Source

[code]

NavDividerLi(*c, cls=(), **kwargs) -> fastcore.xml.FT

[/code]

Creates a navigation list item with a divider

Params

• c Components

• cls Additional classes on the li

• kwargs

Returns: Navigation list item with a divider

NavParentLi

Source

[code]

NavParentLi(*nav_container, cls=(), **kwargs) -> fastcore.xml.FT

[/code]

Creates a navigation list item with a parent nav for nesting

Params

• nav_container NavContainer container for a nested nav with parent=False)

• cls Additional classes on the li

• kwargs

Returns: Navigation list item

DropDownNavContainer

Source

[code]

DropDownNavContainer(*li, cls=<NavT.primary: 'uk-nav-primary'>, parent=True, uk_nav=False, uk_dropdown=True, **kwargs) -> fastcore.xml.FT

[/code]

A Nav that is part of a DropDown

Params

• li Components

• cls Additional classes on the nav

• parent Whether to use a parent nav

• uk_nav True for default collapsible behavior, see https://franken-ui.dev/docs/nav#component-options for more advanced options

• uk_dropdown Whether to use a dropdown

• kwargs

Returns: DropDown nav container