The Ueyen navigation bar allows creating a nav-bar with a set of items (linked buttons). The navigation can be set to change its alignment on the different breakpoint
The following selectors class names can be used to create a simple 1-column to 6-column grid.
un-navDefault — Sides aligned.
un-nav-rItems are right-aligned.
un-nav-lItems are left-aligned.
un-nav-cItems are center-aligned.
The following class name .un-nav is assigned to the element, and the class name
.un-nav-items is assigned to the container of the nav's items.
un-bu _primary is assigned to the nav items.
LOGO
- Item 1
- Item 2
- item 3
All the selectors in the basic mode can be followed by :s to :h (small to
huge) to apply the alignment changes in different breakpoints.
un-nav-c:sCenter aligned on larger than Breakpoint Small
un-nav-c:mCenter aligned on larger than Breakpoint Large.
un-nav-c:lCenter aligned on larger than Breakpoint large.
un-nav-c:hCenter aligned on larger than Breakpoint Huge.
un-nav-r:sRight aligned on larger than Breakpoint Small
un-nav-r:mRight aligned on larger than Breakpoint Large.
un-nav-r:lRight aligned on larger than Breakpoint large.
un-nav-r:hRight aligned on larger than Breakpoint Huge.
un-nav-l:sLeft aligned on larger than Breakpoint Small
un-nav-l:mLeft aligned on larger than Breakpoint Large.
un-nav-l:lLeft aligned on larger than Breakpoint large.
un-nav-l:hLeft aligned on larger than Breakpoint Huge.
un-nav-s:sSide aligned on larger than Breakpoint Small
un-nav-s:mSide aligned on larger than Breakpoint Large.
un-nav-s:lSide aligned on larger than Breakpoint large.
un-nav-s:hSide aligned on larger than Breakpoint Huge.
The following navigation bar has these class names: un-nav-r:l un-nav-c
un-nav-c One navigation is centered on any screen size smaller than large-breakpoint.
un-nav-r:l One navigation is right aligned on any screen size larger than large-breakpoint.
- Item 1
- Item 2
- item 3
LOGO