The TopNav component is used to create a top navigation.
Items inside the NavContentToggle will be availble inside the collapsible menu on smaller screens. Items inside NavContent will be visible on smaller screens as well.
import live-web.dom
import live-web-view.navigationstatic any[] use = [TopNav]TopNav{
NavSections{
NavContent{
NavBrand{ A{ href: `#` T`Brand` } }
NavToggleButton{}
}
NavContentToggle{
Ul{
Li{ A{ href: `#` T`Home` } }
Li{ A{ href: `#` T`Install` } }
Li{ A{ href: `#` T`Documentation` } }
}
}
}
}Navigation menu with 3 sections.
import live-web.dom
import live-web-view.navigationstatic any[] use = [TopNav]TopNav{
NavSections{
NavContent{
NavBrand{ A{ href: `#` T`Brand` } }
NavToggleButton{}
}
NavContentWide{
Ul{
Li{ A{ href: '#' T`Wide Link` }}
}
}
NavContentToggle{
Ul{
Li{ A{ href: `#` T`Home` } }
Li{ A{ href: `#` T`Documentation` } }
}
}
}
}Items inside the NavContentWide will be invisible on smaller screens.
import live-web.dom
import live-web-view.navigationstatic any[] use = [TopNav]TopNav{
NavSections{
NavContent{
NavBrand{ A{ href: `#` T`Brand` } }
NavToggleButton{}
}
NavContentWide{
Ul{
Li{ A{ href: '#' T`Wide Link` }}
}
}
NavContentToggle{
Ul{
Li{ A{ href: `#` T`Home` } }
Li{ A{ href: `#` T`Documentation` } }
}
}
}
}TopNav can be created from data received on the server side.
import live-web.dom
import live-web-view.navigationstatic any[] use = [TopNav]TopNav{
NavSections{
data: [
{
links: [
{ type: 'brand', href: '#', label: 'Brand' },
{ type: 'toggle' }
]
},
{
toggle: true,
links: [
{ href: '#', label: 'Home' },
{ href: '#', label: 'About' }
]
},
{
toggle: true,
links: [
{ href: '#', label: 'Source' }
]
}
]
}
}You can create a navigation fixed on top of the screen using the NavFixed component:
TopNav{
NavFixed{
NavSections{
// ...
}
}
} import live-web.dom
import live-web-view.navigationstatic any[] use = [TopNav]TopNav{
NavSections{
NavContent{
NavBrand{ A{ href: `#` T`Brand` } }
NavToggleButton{}
}
NavContentToggle{
Ul{
Li{ A{ href: `#` T`Home` } }
Li{ A{ href: `#` T`Install` } }
Li{ A{ href: `#` T`Documentation` } }
}
}
}
}