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

Nav, NavBar, DowDownNav, and Tab examples

Nav

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

NavHeaderLi
Option 1
Option 2
Option 3
Subtitle Ex
NavSubtitle text to be shown
Parent Name
- Child 1
- Child 2
- Child 3

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),
             ),
    )

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.

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

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)))

Drop Down Navs

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

Tabs

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'))))

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

Tab 1
Tab 2
Tab 3

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

API Docs

NavBar

Source

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

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

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

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

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

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

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

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

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

Creates a navigation subtitle

Params

c Components
cls Additional classes on the div
kwargs

Returns: Navigation subtitle

NavHeaderLi

Source

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

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

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

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

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

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

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

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