@frankenstyle/uikit 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (701) hide show
  1. package/.prettierignore +15 -0
  2. package/.prettierrc.json +12 -0
  3. package/BACKERS.md +5 -0
  4. package/CHANGELOG.md +3759 -0
  5. package/CONTRIBUTING.md +96 -0
  6. package/LICENSE.md +7 -0
  7. package/README.md +65 -0
  8. package/build/build.js +95 -0
  9. package/build/icons.js +35 -0
  10. package/build/less.js +95 -0
  11. package/build/package.json +4 -0
  12. package/build/prefix.js +76 -0
  13. package/build/publishDev.js +33 -0
  14. package/build/release.js +123 -0
  15. package/build/scope.js +106 -0
  16. package/build/scss/mixin.scss +32 -0
  17. package/build/scss.js +252 -0
  18. package/build/util.js +288 -0
  19. package/build/wrapper/component.js +7 -0
  20. package/build/wrapper/icons.js +13 -0
  21. package/composer.json +17 -0
  22. package/dist/css/uikit-rtl.css +13333 -0
  23. package/dist/css/uikit-rtl.min.css +1 -0
  24. package/dist/css/uikit.css +13333 -0
  25. package/dist/css/uikit.min.css +1 -0
  26. package/dist/js/components/.gitkeep +0 -0
  27. package/dist/js/components/countdown.js +112 -0
  28. package/dist/js/components/countdown.min.js +1 -0
  29. package/dist/js/components/filter.js +527 -0
  30. package/dist/js/components/filter.min.js +1 -0
  31. package/dist/js/components/lightbox-panel.js +1695 -0
  32. package/dist/js/components/lightbox-panel.min.js +1 -0
  33. package/dist/js/components/lightbox.js +1783 -0
  34. package/dist/js/components/lightbox.min.js +1 -0
  35. package/dist/js/components/notification.js +127 -0
  36. package/dist/js/components/notification.min.js +1 -0
  37. package/dist/js/components/parallax.js +726 -0
  38. package/dist/js/components/parallax.min.js +1 -0
  39. package/dist/js/components/slider-parallax.js +637 -0
  40. package/dist/js/components/slider-parallax.min.js +1 -0
  41. package/dist/js/components/slider.js +1731 -0
  42. package/dist/js/components/slider.min.js +1 -0
  43. package/dist/js/components/slideshow-parallax.js +637 -0
  44. package/dist/js/components/slideshow-parallax.min.js +1 -0
  45. package/dist/js/components/slideshow.js +1555 -0
  46. package/dist/js/components/slideshow.min.js +1 -0
  47. package/dist/js/components/sortable.js +680 -0
  48. package/dist/js/components/sortable.min.js +1 -0
  49. package/dist/js/components/tooltip.js +446 -0
  50. package/dist/js/components/tooltip.min.js +1 -0
  51. package/dist/js/components/upload.js +235 -0
  52. package/dist/js/components/upload.min.js +1 -0
  53. package/dist/js/uikit-core.js +6726 -0
  54. package/dist/js/uikit-core.min.js +1 -0
  55. package/dist/js/uikit-icons.js +184 -0
  56. package/dist/js/uikit-icons.min.js +1 -0
  57. package/dist/js/uikit.js +10077 -0
  58. package/dist/js/uikit.min.js +1 -0
  59. package/eslint.config.mjs +35 -0
  60. package/jsconfig.json +9 -0
  61. package/package.json +66 -0
  62. package/src/images/backgrounds/accordion-close.svg +4 -0
  63. package/src/images/backgrounds/accordion-open.svg +3 -0
  64. package/src/images/backgrounds/divider-icon.svg +3 -0
  65. package/src/images/backgrounds/form-checkbox-indeterminate.svg +3 -0
  66. package/src/images/backgrounds/form-checkbox.svg +3 -0
  67. package/src/images/backgrounds/form-datalist.svg +3 -0
  68. package/src/images/backgrounds/form-radio.svg +3 -0
  69. package/src/images/backgrounds/form-select.svg +4 -0
  70. package/src/images/backgrounds/list-bullet.svg +3 -0
  71. package/src/images/components/close-icon.svg +1 -0
  72. package/src/images/components/close-large.svg +1 -0
  73. package/src/images/components/drop-parent-icon.svg +1 -0
  74. package/src/images/components/marker.svg +1 -0
  75. package/src/images/components/nav-parent-icon-large.svg +1 -0
  76. package/src/images/components/nav-parent-icon.svg +1 -0
  77. package/src/images/components/navbar-parent-icon.svg +1 -0
  78. package/src/images/components/navbar-toggle-icon.svg +34 -0
  79. package/src/images/components/overlay-icon.svg +1 -0
  80. package/src/images/components/pagination-next.svg +1 -0
  81. package/src/images/components/pagination-previous.svg +1 -0
  82. package/src/images/components/search-icon.svg +1 -0
  83. package/src/images/components/search-large.svg +1 -0
  84. package/src/images/components/search-medium.svg +1 -0
  85. package/src/images/components/slidenav-next-large.svg +1 -0
  86. package/src/images/components/slidenav-next.svg +1 -0
  87. package/src/images/components/slidenav-previous-large.svg +1 -0
  88. package/src/images/components/slidenav-previous.svg +1 -0
  89. package/src/images/components/spinner.svg +3 -0
  90. package/src/images/components/totop.svg +1 -0
  91. package/src/images/icons/500px.svg +30 -0
  92. package/src/images/icons/album.svg +5 -0
  93. package/src/images/icons/android-robot.svg +6 -0
  94. package/src/images/icons/android.svg +3 -0
  95. package/src/images/icons/apple.svg +3 -0
  96. package/src/images/icons/arrow-down-arrow-up.svg +6 -0
  97. package/src/images/icons/arrow-down.svg +4 -0
  98. package/src/images/icons/arrow-left.svg +4 -0
  99. package/src/images/icons/arrow-right.svg +4 -0
  100. package/src/images/icons/arrow-up-right.svg +4 -0
  101. package/src/images/icons/arrow-up.svg +4 -0
  102. package/src/images/icons/bag.svg +4 -0
  103. package/src/images/icons/ban.svg +4 -0
  104. package/src/images/icons/behance.svg +5 -0
  105. package/src/images/icons/bell.svg +4 -0
  106. package/src/images/icons/bluesky.svg +3 -0
  107. package/src/images/icons/bold.svg +3 -0
  108. package/src/images/icons/bolt.svg +3 -0
  109. package/src/images/icons/bookmark.svg +3 -0
  110. package/src/images/icons/calendar.svg +5 -0
  111. package/src/images/icons/camera.svg +4 -0
  112. package/src/images/icons/cart.svg +5 -0
  113. package/src/images/icons/check.svg +3 -0
  114. package/src/images/icons/chevron-double-left.svg +4 -0
  115. package/src/images/icons/chevron-double-right.svg +4 -0
  116. package/src/images/icons/chevron-down.svg +3 -0
  117. package/src/images/icons/chevron-left.svg +3 -0
  118. package/src/images/icons/chevron-right.svg +3 -0
  119. package/src/images/icons/chevron-up.svg +3 -0
  120. package/src/images/icons/clock.svg +5 -0
  121. package/src/images/icons/close-circle.svg +5 -0
  122. package/src/images/icons/close.svg +4 -0
  123. package/src/images/icons/cloud-download.svg +5 -0
  124. package/src/images/icons/cloud-upload.svg +5 -0
  125. package/src/images/icons/code.svg +4 -0
  126. package/src/images/icons/cog.svg +4 -0
  127. package/src/images/icons/comment.svg +3 -0
  128. package/src/images/icons/commenting.svg +6 -0
  129. package/src/images/icons/comments.svg +4 -0
  130. package/src/images/icons/copy.svg +4 -0
  131. package/src/images/icons/credit-card.svg +4 -0
  132. package/src/images/icons/crosshairs.svg +7 -0
  133. package/src/images/icons/database.svg +6 -0
  134. package/src/images/icons/desktop.svg +6 -0
  135. package/src/images/icons/discord.svg +3 -0
  136. package/src/images/icons/download.svg +5 -0
  137. package/src/images/icons/dribbble.svg +6 -0
  138. package/src/images/icons/etsy.svg +3 -0
  139. package/src/images/icons/expand.svg +6 -0
  140. package/src/images/icons/eye-slash.svg +5 -0
  141. package/src/images/icons/eye.svg +4 -0
  142. package/src/images/icons/facebook.svg +3 -0
  143. package/src/images/icons/file-edit.svg +4 -0
  144. package/src/images/icons/file-pdf.svg +4 -0
  145. package/src/images/icons/file-text.svg +7 -0
  146. package/src/images/icons/file.svg +3 -0
  147. package/src/images/icons/flickr.svg +4 -0
  148. package/src/images/icons/folder.svg +3 -0
  149. package/src/images/icons/forward.svg +3 -0
  150. package/src/images/icons/foursquare.svg +3 -0
  151. package/src/images/icons/future.svg +6 -0
  152. package/src/images/icons/git-branch.svg +6 -0
  153. package/src/images/icons/git-fork.svg +6 -0
  154. package/src/images/icons/github-alt.svg +3 -0
  155. package/src/images/icons/github.svg +3 -0
  156. package/src/images/icons/gitter.svg +6 -0
  157. package/src/images/icons/google.svg +3 -0
  158. package/src/images/icons/grid.svg +11 -0
  159. package/src/images/icons/happy.svg +6 -0
  160. package/src/images/icons/hashtag.svg +3 -0
  161. package/src/images/icons/heart.svg +3 -0
  162. package/src/images/icons/history.svg +6 -0
  163. package/src/images/icons/home.svg +5 -0
  164. package/src/images/icons/image.svg +6 -0
  165. package/src/images/icons/info.svg +4 -0
  166. package/src/images/icons/instagram.svg +5 -0
  167. package/src/images/icons/italic.svg +3 -0
  168. package/src/images/icons/joomla.svg +6 -0
  169. package/src/images/icons/laptop.svg +4 -0
  170. package/src/images/icons/lifesaver.svg +12 -0
  171. package/src/images/icons/link-external.svg +5 -0
  172. package/src/images/icons/link.svg +5 -0
  173. package/src/images/icons/linkedin.svg +4 -0
  174. package/src/images/icons/list.svg +8 -0
  175. package/src/images/icons/location.svg +4 -0
  176. package/src/images/icons/lock.svg +4 -0
  177. package/src/images/icons/mail.svg +4 -0
  178. package/src/images/icons/mastodon.svg +3 -0
  179. package/src/images/icons/menu.svg +5 -0
  180. package/src/images/icons/microphone.svg +6 -0
  181. package/src/images/icons/microsoft.svg +3 -0
  182. package/src/images/icons/minus-circle.svg +4 -0
  183. package/src/images/icons/minus.svg +3 -0
  184. package/src/images/icons/more-vertical.svg +5 -0
  185. package/src/images/icons/more.svg +5 -0
  186. package/src/images/icons/move.svg +8 -0
  187. package/src/images/icons/nut.svg +4 -0
  188. package/src/images/icons/paint-bucket.svg +6 -0
  189. package/src/images/icons/pencil.svg +4 -0
  190. package/src/images/icons/phone-landscape.svg +4 -0
  191. package/src/images/icons/phone.svg +4 -0
  192. package/src/images/icons/pinterest.svg +3 -0
  193. package/src/images/icons/play-circle.svg +4 -0
  194. package/src/images/icons/play.svg +3 -0
  195. package/src/images/icons/plus-circle.svg +5 -0
  196. package/src/images/icons/plus.svg +4 -0
  197. package/src/images/icons/print.svg +7 -0
  198. package/src/images/icons/pull.svg +5 -0
  199. package/src/images/icons/push.svg +5 -0
  200. package/src/images/icons/question.svg +5 -0
  201. package/src/images/icons/quote-right.svg +4 -0
  202. package/src/images/icons/receiver.svg +3 -0
  203. package/src/images/icons/reddit.svg +6 -0
  204. package/src/images/icons/refresh.svg +4 -0
  205. package/src/images/icons/reply.svg +3 -0
  206. package/src/images/icons/rss.svg +5 -0
  207. package/src/images/icons/search.svg +4 -0
  208. package/src/images/icons/server.svg +15 -0
  209. package/src/images/icons/settings.svg +11 -0
  210. package/src/images/icons/shrink.svg +6 -0
  211. package/src/images/icons/sign-in.svg +5 -0
  212. package/src/images/icons/sign-out.svg +5 -0
  213. package/src/images/icons/signal.svg +3 -0
  214. package/src/images/icons/social.svg +7 -0
  215. package/src/images/icons/sorting.svg +6 -0
  216. package/src/images/icons/soundcloud.svg +6 -0
  217. package/src/images/icons/star.svg +3 -0
  218. package/src/images/icons/strikethrough.svg +4 -0
  219. package/src/images/icons/table.svg +6 -0
  220. package/src/images/icons/tablet-landscape.svg +4 -0
  221. package/src/images/icons/tablet.svg +4 -0
  222. package/src/images/icons/tag.svg +4 -0
  223. package/src/images/icons/telegram.svg +3 -0
  224. package/src/images/icons/threads.svg +3 -0
  225. package/src/images/icons/thumbnails.svg +6 -0
  226. package/src/images/icons/tiktok.svg +3 -0
  227. package/src/images/icons/trash.svg +7 -0
  228. package/src/images/icons/triangle-down.svg +3 -0
  229. package/src/images/icons/triangle-left.svg +3 -0
  230. package/src/images/icons/triangle-right.svg +3 -0
  231. package/src/images/icons/triangle-up.svg +3 -0
  232. package/src/images/icons/tripadvisor.svg +19 -0
  233. package/src/images/icons/tumblr.svg +3 -0
  234. package/src/images/icons/tv.svg +4 -0
  235. package/src/images/icons/twitch.svg +5 -0
  236. package/src/images/icons/twitter.svg +3 -0
  237. package/src/images/icons/uikit.svg +4 -0
  238. package/src/images/icons/unlock.svg +4 -0
  239. package/src/images/icons/upload.svg +5 -0
  240. package/src/images/icons/user.svg +4 -0
  241. package/src/images/icons/users.svg +5 -0
  242. package/src/images/icons/video-camera.svg +3 -0
  243. package/src/images/icons/vimeo.svg +3 -0
  244. package/src/images/icons/warning.svg +5 -0
  245. package/src/images/icons/whatsapp.svg +3 -0
  246. package/src/images/icons/wordpress.svg +3 -0
  247. package/src/images/icons/world.svg +7 -0
  248. package/src/images/icons/x.svg +3 -0
  249. package/src/images/icons/xing.svg +4 -0
  250. package/src/images/icons/yelp.svg +15 -0
  251. package/src/images/icons/yootheme.svg +3 -0
  252. package/src/images/icons/youtube.svg +3 -0
  253. package/src/js/api/app.js +12 -0
  254. package/src/js/api/boot.js +84 -0
  255. package/src/js/api/component.js +84 -0
  256. package/src/js/api/computed.js +80 -0
  257. package/src/js/api/events.js +33 -0
  258. package/src/js/api/global.js +74 -0
  259. package/src/js/api/hooks.js +51 -0
  260. package/src/js/api/index.js +8 -0
  261. package/src/js/api/instance.js +66 -0
  262. package/src/js/api/log.js +10 -0
  263. package/src/js/api/observables.js +132 -0
  264. package/src/js/api/observer.js +64 -0
  265. package/src/js/api/options.js +180 -0
  266. package/src/js/api/props.js +107 -0
  267. package/src/js/api/state.js +65 -0
  268. package/src/js/api/update.js +66 -0
  269. package/src/js/api/watch.js +30 -0
  270. package/src/js/components/countdown.js +113 -0
  271. package/src/js/components/filter.js +211 -0
  272. package/src/js/components/index.js +13 -0
  273. package/src/js/components/internal/lightbox-animations.js +40 -0
  274. package/src/js/components/internal/slider-preload.js +14 -0
  275. package/src/js/components/internal/slider-transitioner.js +186 -0
  276. package/src/js/components/internal/slideshow-animations.js +100 -0
  277. package/src/js/components/lightbox-panel.js +482 -0
  278. package/src/js/components/lightbox.js +136 -0
  279. package/src/js/components/notification.js +134 -0
  280. package/src/js/components/parallax.js +86 -0
  281. package/src/js/components/slider-parallax.js +81 -0
  282. package/src/js/components/slider.js +388 -0
  283. package/src/js/components/slideshow-parallax.js +1 -0
  284. package/src/js/components/slideshow.js +44 -0
  285. package/src/js/components/sortable.js +448 -0
  286. package/src/js/components/tooltip.js +183 -0
  287. package/src/js/components/upload.js +248 -0
  288. package/src/js/core/accordion.js +244 -0
  289. package/src/js/core/alert.js +59 -0
  290. package/src/js/core/cover.js +57 -0
  291. package/src/js/core/drop.js +514 -0
  292. package/src/js/core/dropnav.js +449 -0
  293. package/src/js/core/form-custom.js +74 -0
  294. package/src/js/core/grid.js +210 -0
  295. package/src/js/core/height-match.js +79 -0
  296. package/src/js/core/height-placeholder.js +35 -0
  297. package/src/js/core/height-viewport.js +98 -0
  298. package/src/js/core/icon.js +285 -0
  299. package/src/js/core/img.js +157 -0
  300. package/src/js/core/index.js +49 -0
  301. package/src/js/core/inverse.js +173 -0
  302. package/src/js/core/leader.js +52 -0
  303. package/src/js/core/margin.js +125 -0
  304. package/src/js/core/modal.js +179 -0
  305. package/src/js/core/nav.js +11 -0
  306. package/src/js/core/navbar.js +96 -0
  307. package/src/js/core/offcanvas.js +178 -0
  308. package/src/js/core/overflow-auto.js +50 -0
  309. package/src/js/core/overflow-fade.js +67 -0
  310. package/src/js/core/responsive.js +10 -0
  311. package/src/js/core/scroll.js +71 -0
  312. package/src/js/core/scrollspy-nav.js +112 -0
  313. package/src/js/core/scrollspy.js +141 -0
  314. package/src/js/core/sticky.js +509 -0
  315. package/src/js/core/svg.js +101 -0
  316. package/src/js/core/switcher.js +246 -0
  317. package/src/js/core/tab.js +31 -0
  318. package/src/js/core/toggle.js +225 -0
  319. package/src/js/core/video.js +128 -0
  320. package/src/js/mixin/animate.js +34 -0
  321. package/src/js/mixin/class.js +7 -0
  322. package/src/js/mixin/container.js +17 -0
  323. package/src/js/mixin/event.js +5 -0
  324. package/src/js/mixin/i18n.js +21 -0
  325. package/src/js/mixin/internal/animate-fade.js +141 -0
  326. package/src/js/mixin/internal/animate-slide.js +163 -0
  327. package/src/js/mixin/internal/slideshow-animations.js +28 -0
  328. package/src/js/mixin/internal/slideshow-transitioner.js +73 -0
  329. package/src/js/mixin/media.js +53 -0
  330. package/src/js/mixin/modal.js +313 -0
  331. package/src/js/mixin/parallax.js +408 -0
  332. package/src/js/mixin/position.js +113 -0
  333. package/src/js/mixin/slider-autoplay.js +71 -0
  334. package/src/js/mixin/slider-drag.js +236 -0
  335. package/src/js/mixin/slider-nav.js +248 -0
  336. package/src/js/mixin/slider-parallax.js +147 -0
  337. package/src/js/mixin/slider-reactive.js +19 -0
  338. package/src/js/mixin/slider.js +228 -0
  339. package/src/js/mixin/slideshow.js +46 -0
  340. package/src/js/mixin/svg.js +121 -0
  341. package/src/js/mixin/togglable.js +258 -0
  342. package/src/js/uikit-core.js +11 -0
  343. package/src/js/uikit.js +7 -0
  344. package/src/js/util/animation.js +122 -0
  345. package/src/js/util/attr.js +42 -0
  346. package/src/js/util/await.js +7 -0
  347. package/src/js/util/class.js +53 -0
  348. package/src/js/util/dimensions.js +220 -0
  349. package/src/js/util/dom.js +118 -0
  350. package/src/js/util/env.js +12 -0
  351. package/src/js/util/event.js +142 -0
  352. package/src/js/util/fastdom.js +62 -0
  353. package/src/js/util/filter.js +91 -0
  354. package/src/js/util/index.js +17 -0
  355. package/src/js/util/keys.js +11 -0
  356. package/src/js/util/lang.js +280 -0
  357. package/src/js/util/mouse.js +80 -0
  358. package/src/js/util/observer.js +49 -0
  359. package/src/js/util/player.js +98 -0
  360. package/src/js/util/position.js +235 -0
  361. package/src/js/util/scroll.js +64 -0
  362. package/src/js/util/selector.js +143 -0
  363. package/src/js/util/style.js +96 -0
  364. package/src/js/util/svg.js +10 -0
  365. package/src/js/util/viewport.js +251 -0
  366. package/src/less/components/_import.less +96 -0
  367. package/src/less/components/accordion.less +122 -0
  368. package/src/less/components/alert.less +146 -0
  369. package/src/less/components/align.less +142 -0
  370. package/src/less/components/animation.less +283 -0
  371. package/src/less/components/article.less +110 -0
  372. package/src/less/components/background.less +140 -0
  373. package/src/less/components/badge.less +90 -0
  374. package/src/less/components/base.less +740 -0
  375. package/src/less/components/breadcrumb.less +157 -0
  376. package/src/less/components/button.less +540 -0
  377. package/src/less/components/card.less +441 -0
  378. package/src/less/components/close.less +67 -0
  379. package/src/less/components/column.less +143 -0
  380. package/src/less/components/comment.less +160 -0
  381. package/src/less/components/container.less +185 -0
  382. package/src/less/components/countdown.less +112 -0
  383. package/src/less/components/cover.less +76 -0
  384. package/src/less/components/description-list.less +71 -0
  385. package/src/less/components/divider.less +176 -0
  386. package/src/less/components/dotnav.less +177 -0
  387. package/src/less/components/drop.less +78 -0
  388. package/src/less/components/dropbar.less +131 -0
  389. package/src/less/components/dropdown.less +213 -0
  390. package/src/less/components/dropnav.less +43 -0
  391. package/src/less/components/flex.less +308 -0
  392. package/src/less/components/form-range.less +191 -0
  393. package/src/less/components/form.less +930 -0
  394. package/src/less/components/grid.less +419 -0
  395. package/src/less/components/heading.less +289 -0
  396. package/src/less/components/height.less +57 -0
  397. package/src/less/components/icon.less +313 -0
  398. package/src/less/components/iconnav.less +163 -0
  399. package/src/less/components/inverse.less +64 -0
  400. package/src/less/components/label.less +110 -0
  401. package/src/less/components/leader.less +75 -0
  402. package/src/less/components/lightbox.less +215 -0
  403. package/src/less/components/link.less +167 -0
  404. package/src/less/components/list.less +245 -0
  405. package/src/less/components/margin.less +263 -0
  406. package/src/less/components/marker.less +74 -0
  407. package/src/less/components/mixin.less +20 -0
  408. package/src/less/components/modal.less +366 -0
  409. package/src/less/components/nav.less +755 -0
  410. package/src/less/components/navbar.less +681 -0
  411. package/src/less/components/notification.less +191 -0
  412. package/src/less/components/offcanvas.less +329 -0
  413. package/src/less/components/overlay.less +92 -0
  414. package/src/less/components/padding.less +81 -0
  415. package/src/less/components/pagination.less +159 -0
  416. package/src/less/components/placeholder.less +45 -0
  417. package/src/less/components/position.less +241 -0
  418. package/src/less/components/print.less +61 -0
  419. package/src/less/components/progress.less +83 -0
  420. package/src/less/components/search.less +488 -0
  421. package/src/less/components/section.less +257 -0
  422. package/src/less/components/slidenav.less +137 -0
  423. package/src/less/components/slider.less +123 -0
  424. package/src/less/components/slideshow.less +93 -0
  425. package/src/less/components/sortable.less +90 -0
  426. package/src/less/components/spinner.less +74 -0
  427. package/src/less/components/sticky.less +65 -0
  428. package/src/less/components/subnav.less +317 -0
  429. package/src/less/components/svg.less +36 -0
  430. package/src/less/components/switcher.less +47 -0
  431. package/src/less/components/tab.less +222 -0
  432. package/src/less/components/table.less +352 -0
  433. package/src/less/components/text.less +296 -0
  434. package/src/less/components/thumbnav.less +133 -0
  435. package/src/less/components/tile.less +247 -0
  436. package/src/less/components/tooltip.less +79 -0
  437. package/src/less/components/totop.less +86 -0
  438. package/src/less/components/transition.less +172 -0
  439. package/src/less/components/utility.less +584 -0
  440. package/src/less/components/variables.less +123 -0
  441. package/src/less/components/visibility.less +164 -0
  442. package/src/less/components/width.less +489 -0
  443. package/src/less/theme/_import.less +82 -0
  444. package/src/less/theme/accordion.less +82 -0
  445. package/src/less/theme/alert.less +76 -0
  446. package/src/less/theme/align.less +14 -0
  447. package/src/less/theme/animation.less +14 -0
  448. package/src/less/theme/article.less +60 -0
  449. package/src/less/theme/background.less +14 -0
  450. package/src/less/theme/badge.less +29 -0
  451. package/src/less/theme/base.less +134 -0
  452. package/src/less/theme/breadcrumb.less +45 -0
  453. package/src/less/theme/button.less +212 -0
  454. package/src/less/theme/card.less +236 -0
  455. package/src/less/theme/close.less +32 -0
  456. package/src/less/theme/column.less +14 -0
  457. package/src/less/theme/comment.less +72 -0
  458. package/src/less/theme/container.less +14 -0
  459. package/src/less/theme/countdown.less +53 -0
  460. package/src/less/theme/description-list.less +36 -0
  461. package/src/less/theme/divider.less +49 -0
  462. package/src/less/theme/dotnav.less +57 -0
  463. package/src/less/theme/drop.less +14 -0
  464. package/src/less/theme/dropbar.less +44 -0
  465. package/src/less/theme/dropdown.less +59 -0
  466. package/src/less/theme/form-range.less +57 -0
  467. package/src/less/theme/form.less +154 -0
  468. package/src/less/theme/grid.less +28 -0
  469. package/src/less/theme/heading.less +71 -0
  470. package/src/less/theme/height.less +14 -0
  471. package/src/less/theme/icon.less +67 -0
  472. package/src/less/theme/iconnav.less +44 -0
  473. package/src/less/theme/inverse.less +14 -0
  474. package/src/less/theme/label.less +46 -0
  475. package/src/less/theme/leader.less +26 -0
  476. package/src/less/theme/lightbox.less +32 -0
  477. package/src/less/theme/link.less +55 -0
  478. package/src/less/theme/list.less +50 -0
  479. package/src/less/theme/margin.less +14 -0
  480. package/src/less/theme/marker.less +31 -0
  481. package/src/less/theme/modal.less +102 -0
  482. package/src/less/theme/nav.less +142 -0
  483. package/src/less/theme/navbar.less +179 -0
  484. package/src/less/theme/notification.less +44 -0
  485. package/src/less/theme/offcanvas.less +32 -0
  486. package/src/less/theme/overlay.less +33 -0
  487. package/src/less/theme/padding.less +14 -0
  488. package/src/less/theme/pagination.less +41 -0
  489. package/src/less/theme/placeholder.less +29 -0
  490. package/src/less/theme/position.less +14 -0
  491. package/src/less/theme/progress.less +27 -0
  492. package/src/less/theme/search.less +121 -0
  493. package/src/less/theme/section.less +32 -0
  494. package/src/less/theme/slidenav.less +52 -0
  495. package/src/less/theme/slider.less +14 -0
  496. package/src/less/theme/sortable.less +38 -0
  497. package/src/less/theme/spinner.less +14 -0
  498. package/src/less/theme/sticky.less +14 -0
  499. package/src/less/theme/subnav.less +79 -0
  500. package/src/less/theme/tab.less +138 -0
  501. package/src/less/theme/table.less +86 -0
  502. package/src/less/theme/text.less +61 -0
  503. package/src/less/theme/thumbnav.less +65 -0
  504. package/src/less/theme/tile.less +52 -0
  505. package/src/less/theme/tooltip.less +20 -0
  506. package/src/less/theme/totop.less +32 -0
  507. package/src/less/theme/transition.less +14 -0
  508. package/src/less/theme/utility.less +52 -0
  509. package/src/less/theme/variables.less +36 -0
  510. package/src/less/theme/width.less +14 -0
  511. package/src/less/uikit.less +5 -0
  512. package/src/less/uikit.theme.less +11 -0
  513. package/src/scss/components/_import.scss +96 -0
  514. package/src/scss/components/accordion.scss +100 -0
  515. package/src/scss/components/alert.scss +133 -0
  516. package/src/scss/components/align.scss +141 -0
  517. package/src/scss/components/animation.scss +278 -0
  518. package/src/scss/components/article.scss +93 -0
  519. package/src/scss/components/background.scss +138 -0
  520. package/src/scss/components/badge.scss +71 -0
  521. package/src/scss/components/base.scss +561 -0
  522. package/src/scss/components/breadcrumb.scss +115 -0
  523. package/src/scss/components/button.scss +374 -0
  524. package/src/scss/components/card.scss +379 -0
  525. package/src/scss/components/close.scss +53 -0
  526. package/src/scss/components/column.scss +136 -0
  527. package/src/scss/components/comment.scss +153 -0
  528. package/src/scss/components/container.scss +180 -0
  529. package/src/scss/components/countdown.scss +93 -0
  530. package/src/scss/components/cover.scss +78 -0
  531. package/src/scss/components/description-list.scss +68 -0
  532. package/src/scss/components/divider.scss +137 -0
  533. package/src/scss/components/dotnav.scss +144 -0
  534. package/src/scss/components/drop.scss +75 -0
  535. package/src/scss/components/dropbar.scss +123 -0
  536. package/src/scss/components/dropdown.scss +192 -0
  537. package/src/scss/components/dropnav.scss +44 -0
  538. package/src/scss/components/flex.scss +310 -0
  539. package/src/scss/components/form-range.scss +147 -0
  540. package/src/scss/components/form.scss +771 -0
  541. package/src/scss/components/grid.scss +394 -0
  542. package/src/scss/components/heading.scss +227 -0
  543. package/src/scss/components/height.scss +56 -0
  544. package/src/scss/components/icon.scss +228 -0
  545. package/src/scss/components/iconnav.scss +140 -0
  546. package/src/scss/components/inverse.scss +51 -0
  547. package/src/scss/components/label.scss +90 -0
  548. package/src/scss/components/leader.scss +69 -0
  549. package/src/scss/components/lightbox.scss +205 -0
  550. package/src/scss/components/link.scss +131 -0
  551. package/src/scss/components/list.scss +199 -0
  552. package/src/scss/components/margin.scss +257 -0
  553. package/src/scss/components/marker.scss +56 -0
  554. package/src/scss/components/mixin.scss +34 -0
  555. package/src/scss/components/modal.scss +336 -0
  556. package/src/scss/components/nav.scss +533 -0
  557. package/src/scss/components/navbar.scss +579 -0
  558. package/src/scss/components/notification.scss +178 -0
  559. package/src/scss/components/offcanvas.scss +318 -0
  560. package/src/scss/components/overlay.scss +88 -0
  561. package/src/scss/components/padding.scss +78 -0
  562. package/src/scss/components/pagination.scss +127 -0
  563. package/src/scss/components/placeholder.scss +43 -0
  564. package/src/scss/components/position.scss +240 -0
  565. package/src/scss/components/print.scss +63 -0
  566. package/src/scss/components/progress.scss +81 -0
  567. package/src/scss/components/search.scss +367 -0
  568. package/src/scss/components/section.scss +243 -0
  569. package/src/scss/components/slidenav.scss +112 -0
  570. package/src/scss/components/slider.scss +121 -0
  571. package/src/scss/components/slideshow.scss +95 -0
  572. package/src/scss/components/sortable.scss +89 -0
  573. package/src/scss/components/spinner.scss +73 -0
  574. package/src/scss/components/sticky.scss +64 -0
  575. package/src/scss/components/subnav.scss +222 -0
  576. package/src/scss/components/svg.scss +38 -0
  577. package/src/scss/components/switcher.scss +49 -0
  578. package/src/scss/components/tab.scss +186 -0
  579. package/src/scss/components/table.scss +293 -0
  580. package/src/scss/components/text.scss +256 -0
  581. package/src/scss/components/thumbnav.scss +119 -0
  582. package/src/scss/components/tile.scss +230 -0
  583. package/src/scss/components/tooltip.scss +72 -0
  584. package/src/scss/components/totop.scss +64 -0
  585. package/src/scss/components/transition.scss +169 -0
  586. package/src/scss/components/utility.scss +545 -0
  587. package/src/scss/components/variables.scss +84 -0
  588. package/src/scss/components/visibility.scss +166 -0
  589. package/src/scss/components/width.scss +487 -0
  590. package/src/scss/mixins-theme.scss +2298 -0
  591. package/src/scss/mixins.scss +1896 -0
  592. package/src/scss/uikit-theme.scss +8 -0
  593. package/src/scss/uikit.scss +5 -0
  594. package/src/scss/variables-theme.scss +1325 -0
  595. package/src/scss/variables.scss +1190 -0
  596. package/tests/accordion.html +214 -0
  597. package/tests/alert.html +124 -0
  598. package/tests/align.html +133 -0
  599. package/tests/animation.html +252 -0
  600. package/tests/article.html +167 -0
  601. package/tests/background.html +67 -0
  602. package/tests/badge.html +93 -0
  603. package/tests/base.html +244 -0
  604. package/tests/breadcrumb.html +64 -0
  605. package/tests/button.html +257 -0
  606. package/tests/card.html +630 -0
  607. package/tests/close.html +74 -0
  608. package/tests/column.html +71 -0
  609. package/tests/comment.html +209 -0
  610. package/tests/container.html +266 -0
  611. package/tests/countdown.html +716 -0
  612. package/tests/cover.html +167 -0
  613. package/tests/description-list.html +51 -0
  614. package/tests/divider.html +89 -0
  615. package/tests/dotnav.html +139 -0
  616. package/tests/drop.html +782 -0
  617. package/tests/dropbar.html +551 -0
  618. package/tests/dropdown.html +286 -0
  619. package/tests/dropnav.html +856 -0
  620. package/tests/filter.html +287 -0
  621. package/tests/flex.html +182 -0
  622. package/tests/form.html +675 -0
  623. package/tests/grid-masonry.html +80 -0
  624. package/tests/grid-parallax.html +171 -0
  625. package/tests/grid.html +679 -0
  626. package/tests/heading.html +337 -0
  627. package/tests/height-expand.html +32 -0
  628. package/tests/height-viewport.html +253 -0
  629. package/tests/height.html +160 -0
  630. package/tests/icon.html +907 -0
  631. package/tests/iconnav.html +40 -0
  632. package/tests/image.html +642 -0
  633. package/tests/images/avatar.jpg +0 -0
  634. package/tests/images/dark.jpg +0 -0
  635. package/tests/images/icons.svg +24 -0
  636. package/tests/images/image-type.avif +0 -0
  637. package/tests/images/image-type.jpeg +0 -0
  638. package/tests/images/image-type.webp +0 -0
  639. package/tests/images/light.jpg +0 -0
  640. package/tests/images/photo.jpg +0 -0
  641. package/tests/images/photo2.jpg +0 -0
  642. package/tests/images/photo3.jpg +0 -0
  643. package/tests/images/size-h.jpg +0 -0
  644. package/tests/images/size-v.jpg +0 -0
  645. package/tests/images/size1.jpg +0 -0
  646. package/tests/images/size2.jpg +0 -0
  647. package/tests/images/slider1.jpg +0 -0
  648. package/tests/images/slider2.jpg +0 -0
  649. package/tests/images/slider3.jpg +0 -0
  650. package/tests/images/slider4.jpg +0 -0
  651. package/tests/images/slider5.jpg +0 -0
  652. package/tests/index.html +905 -0
  653. package/tests/js/index.js +171 -0
  654. package/tests/label.html +28 -0
  655. package/tests/leader.html +67 -0
  656. package/tests/lightbox.html +689 -0
  657. package/tests/link.html +121 -0
  658. package/tests/list.html +490 -0
  659. package/tests/margin.html +208 -0
  660. package/tests/marker.html +87 -0
  661. package/tests/modal.html +497 -0
  662. package/tests/nav.html +487 -0
  663. package/tests/navbar.html +2746 -0
  664. package/tests/notification.html +137 -0
  665. package/tests/offcanvas.html +780 -0
  666. package/tests/overlay.html +102 -0
  667. package/tests/padding.html +52 -0
  668. package/tests/pagination.html +140 -0
  669. package/tests/parallax.html +298 -0
  670. package/tests/placeholder.html +33 -0
  671. package/tests/position.html +436 -0
  672. package/tests/progress.html +59 -0
  673. package/tests/scroll.html +118 -0
  674. package/tests/scrollspy.html +593 -0
  675. package/tests/search.html +535 -0
  676. package/tests/section.html +384 -0
  677. package/tests/slidenav.html +333 -0
  678. package/tests/slider.html +661 -0
  679. package/tests/slideshow.html +565 -0
  680. package/tests/sortable.html +300 -0
  681. package/tests/spinner.html +25 -0
  682. package/tests/sticky-navbar.html +1421 -0
  683. package/tests/sticky-parallax.html +279 -0
  684. package/tests/sticky.html +429 -0
  685. package/tests/subnav.html +282 -0
  686. package/tests/svg.html +78 -0
  687. package/tests/switcher.html +394 -0
  688. package/tests/tab.html +266 -0
  689. package/tests/table.html +329 -0
  690. package/tests/text.html +155 -0
  691. package/tests/thumbnav.html +64 -0
  692. package/tests/tile.html +226 -0
  693. package/tests/toggle.html +186 -0
  694. package/tests/tooltip.html +126 -0
  695. package/tests/totop.html +68 -0
  696. package/tests/transition.html +246 -0
  697. package/tests/upload.html +290 -0
  698. package/tests/utility.html +644 -0
  699. package/tests/video.html +206 -0
  700. package/tests/visibility.html +112 -0
  701. package/tests/width.html +130 -0
package/tests/navbar.html ADDED
@@ -0,0 +1,2746 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-gb" dir="ltr">
3
+
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1">
7
+ <title>Navbar - UIkit tests</title>
8
+ <script src="js/test.js"></script>
9
+ <style>
10
+
11
+ .test {
12
+ display: block;
13
+ position: relative;
14
+ z-index: 1;
15
+ width: 100%;
16
+ margin-left: 0;
17
+ }
18
+
19
+ .scroll-container {
20
+ border: 1px dashed rgba(0,0,0,0.2);
21
+ overflow: auto;
22
+ }
23
+
24
+ </style>
25
+ </head>
26
+
27
+ <body>
28
+
29
+ <div class="uk-container">
30
+
31
+ <h1>Navbar</h1>
32
+
33
+ <div uk-grid>
34
+ <div class="uk-width-1-2@m">
35
+
36
+ <nav class="uk-navbar-container uk-margin" uk-navbar>
37
+ <div class="uk-navbar-left">
38
+
39
+ <ul class="uk-navbar-nav">
40
+ <li class="uk-active"><a href="#">Active</a></li>
41
+ <li>
42
+ <a href>Parent</a>
43
+ <div class="uk-navbar-dropdown">
44
+ <ul class="uk-nav uk-navbar-dropdown-nav">
45
+ <li class="uk-active"><a href="#">Active</a></li>
46
+ <li class="uk-parent">
47
+ <a href="#">Parent</a>
48
+ <ul class="uk-nav-sub">
49
+ <li><a href="#">Sub item</a></li>
50
+ <li><a href="#">Sub item</a></li>
51
+ </ul>
52
+ </li>
53
+ <li class="uk-nav-header">Header</li>
54
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
55
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
56
+ <li class="uk-nav-divider"></li>
57
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
58
+ </ul>
59
+ </div>
60
+ </li>
61
+ <li>
62
+ <a href>Parent</a>
63
+ <div class="uk-navbar-dropdown">
64
+ <ul class="uk-nav uk-navbar-dropdown-nav">
65
+ <li class="uk-active"><a href="#">Active</a></li>
66
+ <li class="uk-parent">
67
+ <a href="#">Parent</a>
68
+ <ul class="uk-nav-sub">
69
+ <li><a href="#">Sub item</a></li>
70
+ <li><a href="#">Sub item</a></li>
71
+ </ul>
72
+ </li>
73
+ <li class="uk-nav-header">Header</li>
74
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
75
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
76
+ <li class="uk-nav-divider"></li>
77
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
78
+ </ul>
79
+ </div>
80
+ </li>
81
+ <li>
82
+ <a href="#">Content</a>
83
+ <div class="uk-navbar-dropdown">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
84
+ </li>
85
+ <li><a href="#">Item</a></li>
86
+ <li><a href="#">Item</a></li>
87
+ </ul>
88
+
89
+ </div>
90
+ </nav>
91
+
92
+ <h2>Transparent</h2>
93
+
94
+ <div class="uk-margin uk-position-relative uk-light">
95
+ <canvas class="uk-background-cover" style="background-image: url('images/dark.jpg')" width="1000" height="300"></canvas>
96
+ <div class="uk-position-top">
97
+ <nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
98
+ <div class="uk-navbar-left">
99
+ <ul class="uk-navbar-nav">
100
+ <li class="uk-active"><a href>Active</a></li>
101
+ <li>
102
+ <a href>Parent <span uk-navbar-parent-icon></span></a>
103
+ <div class="uk-navbar-dropdown">
104
+ <ul class="uk-nav uk-navbar-dropdown-nav">
105
+ <li class="uk-active"><a href="#">Active</a></li>
106
+ <li class="uk-parent">
107
+ <a href="#">Parent</a>
108
+ <ul class="uk-nav-sub">
109
+ <li><a href="#">Sub item</a></li>
110
+ <li><a href="#">Sub item</a></li>
111
+ </ul>
112
+ </li>
113
+ <li class="uk-nav-header">Header</li>
114
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
115
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
116
+ <li class="uk-nav-divider"></li>
117
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
118
+ </ul>
119
+ </div>
120
+ </li>
121
+ <li><a href>Item</a></li>
122
+ <li><a href>Item</a></li>
123
+ </ul>
124
+ </div>
125
+ <div class="uk-navbar-right">
126
+ <div class="uk-navbar-item">
127
+ <div>Some <a href="#">Link</a></div>
128
+ </div>
129
+ <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
130
+ </div>
131
+ </nav>
132
+ </div>
133
+ </div>
134
+
135
+ <div class="uk-margin uk-position-relative uk-dark">
136
+ <canvas class="uk-background-cover" style="background-image: url('images/light.jpg')" width="1000" height="300"></canvas>
137
+ <div class="uk-position-top">
138
+ <nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
139
+ <div class="uk-navbar-left">
140
+ <ul class="uk-navbar-nav">
141
+ <li class="uk-active"><a href>Active</a></li>
142
+ <li>
143
+ <a href>Parent <span uk-navbar-parent-icon></span></a>
144
+ <div class="uk-navbar-dropdown">
145
+ <ul class="uk-nav uk-navbar-dropdown-nav">
146
+ <li class="uk-active"><a href="#">Active</a></li>
147
+ <li class="uk-parent">
148
+ <a href="#">Parent</a>
149
+ <ul class="uk-nav-sub">
150
+ <li><a href="#">Sub item</a></li>
151
+ <li><a href="#">Sub item</a></li>
152
+ </ul>
153
+ </li>
154
+ <li class="uk-nav-header">Header</li>
155
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
156
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
157
+ <li class="uk-nav-divider"></li>
158
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
159
+ </ul>
160
+ </div>
161
+ </li>
162
+ <li><a href>Item</a></li>
163
+ <li><a href>Item</a></li>
164
+ </ul>
165
+ </div>
166
+ <div class="uk-navbar-right">
167
+ <div class="uk-navbar-item">
168
+ <div>Some <a href="#">Link</a></div>
169
+ </div>
170
+ <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
171
+ </div>
172
+ </nav>
173
+ </div>
174
+ </div>
175
+
176
+ </div>
177
+ <div class="uk-width-1-4@m">
178
+
179
+ <div class="uk-drop uk-navbar-dropdown test">
180
+
181
+ <ul class="uk-nav uk-navbar-dropdown-nav">
182
+ <li class="uk-active"><a href="#">Active</a></li>
183
+ <li class="uk-parent">
184
+ <a href="#">Parent</a>
185
+ <ul class="uk-nav-sub">
186
+ <li><a href="#">Sub item</a></li>
187
+ <li><a href="#">Sub item</a>
188
+ <ul>
189
+ <li><a href="#">Sub item</a></li>
190
+ <li><a href="#">Sub item</a></li>
191
+ </ul>
192
+ </li>
193
+ </ul>
194
+ </li>
195
+ <li class="uk-parent">
196
+ <a href="#">Parent</a>
197
+ <ul class="uk-nav-sub">
198
+ <li class="uk-active"><a href="#">Active</a></li>
199
+ <li><a href="#">Sub item</a></li>
200
+ </ul>
201
+ </li>
202
+ <li class="uk-nav-header">Header</li>
203
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
204
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
205
+ <li class="uk-nav-divider"></li>
206
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
207
+ </ul>
208
+
209
+ </div>
210
+
211
+ </div>
212
+ <div class="uk-width-1-4@m">
213
+
214
+ <div class="uk-drop uk-navbar-dropdown test">
215
+
216
+ <ul class="uk-nav uk-nav-secondary">
217
+ <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
218
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
219
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
220
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
221
+ </ul>
222
+
223
+ </div>
224
+
225
+ </div>
226
+ </div>
227
+
228
+ <h2>Click</h2>
229
+
230
+ </div>
231
+
232
+ <nav class="uk-navbar-container uk-margin">
233
+ <div class="uk-container">
234
+ <div uk-navbar="mode: click">
235
+ <div class="uk-navbar-left">
236
+
237
+ <ul class="uk-navbar-nav">
238
+ <li class="uk-active"><a href="#">Active</a></li>
239
+ <li>
240
+ <a href="#">Parent</a>
241
+ <div class="uk-navbar-dropdown">
242
+ <ul class="uk-nav uk-navbar-dropdown-nav">
243
+ <li class="uk-active"><a href="#">Active</a></li>
244
+ <li class="uk-parent">
245
+ <a href="#">Parent</a>
246
+ <ul class="uk-nav-sub">
247
+ <li><a href="#">Sub item</a></li>
248
+ <li><a href="#">Sub item</a></li>
249
+ </ul>
250
+ </li>
251
+ <li class="uk-nav-header">Header</li>
252
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
253
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
254
+ <li class="uk-nav-divider"></li>
255
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
256
+ </ul>
257
+ </div>
258
+ </li>
259
+ <li>
260
+ <a href="#">Content</a>
261
+ <div class="uk-navbar-dropdown">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
262
+ </li>
263
+ <li><a href="#">Item</a></li>
264
+ <li><a href="#">Item</a></li>
265
+ </ul>
266
+
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </nav>
271
+
272
+ <div class="uk-container uk-margin-medium-top">
273
+
274
+ <h2>Dropdown</h2>
275
+
276
+ <div class="uk-margin">
277
+ <select id="js-dropdown-size-switcher" class="uk-select uk-form-width-small" aria-label="Dropdown size switcher">
278
+ <option value="">Default</option>
279
+ <option value="uk-navbar-dropdown-large">Large</option>
280
+ </select>
281
+ </div>
282
+
283
+ </div>
284
+
285
+ <nav class="uk-navbar-container uk-margin">
286
+ <div class="uk-container">
287
+ <div uk-navbar>
288
+ <div class="uk-navbar-left">
289
+
290
+ <ul class="uk-navbar-nav">
291
+ <li class="uk-active">
292
+ <a href="#">Left</a>
293
+ <div class="uk-navbar-dropdown">
294
+ <ul class="uk-nav uk-navbar-dropdown-nav">
295
+ <li class="uk-active"><a href="#">Active</a></li>
296
+ <li class="uk-parent">
297
+ <a href="#">Parent</a>
298
+ <ul class="uk-nav-sub">
299
+ <li><a href="#">Sub item</a></li>
300
+ <li><a href="#">Sub item</a></li>
301
+ </ul>
302
+ </li>
303
+ <li class="uk-nav-header">Header</li>
304
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
305
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
306
+ <li class="uk-nav-divider"></li>
307
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
308
+ </ul>
309
+ </div>
310
+ </li>
311
+ <li>
312
+ <a href="#">2 Columns</a>
313
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
314
+ <div class="uk-drop-grid uk-child-width-1-2" uk-grid>
315
+ <div>
316
+ <ul class="uk-nav uk-navbar-dropdown-nav">
317
+ <li class="uk-active"><a href="#">Active</a></li>
318
+ <li class="uk-parent"><a href="#">Parent</a></li>
319
+ <li class="uk-nav-header">Header</li>
320
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
321
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
322
+ <li class="uk-nav-divider"></li>
323
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
324
+ </ul>
325
+ </div>
326
+ <div>
327
+ <ul class="uk-nav uk-navbar-dropdown-nav">
328
+ <li class="uk-active"><a href="#">Active</a></li>
329
+ <li class="uk-parent"><a href="#">Parent</a></li>
330
+ <li class="uk-nav-header">Header</li>
331
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
332
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
333
+ <li class="uk-nav-divider"></li>
334
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
335
+ </ul>
336
+ </div>
337
+ </div>
338
+ </div>
339
+ </li>
340
+ <li>
341
+ <a href="#">3 Columns</a>
342
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
343
+ <div class="uk-drop-grid uk-child-width-1-3" uk-grid>
344
+ <div>
345
+ <ul class="uk-nav uk-navbar-dropdown-nav">
346
+ <li class="uk-active"><a href="#">Active</a></li>
347
+ <li class="uk-parent"><a href="#">Parent</a></li>
348
+ <li class="uk-nav-header">Header</li>
349
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
350
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
351
+ </ul>
352
+ </div>
353
+ <div>
354
+ <ul class="uk-nav uk-navbar-dropdown-nav">
355
+ <li class="uk-active"><a href="#">Active</a></li>
356
+ <li class="uk-parent"><a href="#">Parent</a></li>
357
+ <li class="uk-nav-header">Header</li>
358
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
359
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
360
+ </ul>
361
+ </div>
362
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
363
+ </div>
364
+ </div>
365
+ </li>
366
+ <li>
367
+ <a href>Stretch</a>
368
+ <div class="uk-navbar-dropdown" uk-drop="boundary: !.uk-navbar; stretch: x; flip: false">
369
+ <div class="uk-drop-grid uk-child-width-1-3@m" uk-grid>
370
+ <div>
371
+ <ul class="uk-nav uk-navbar-dropdown-nav">
372
+ <li class="uk-active"><a href="#">Active</a></li>
373
+ <li class="uk-parent">
374
+ <a href="#">Parent</a>
375
+ <ul class="uk-nav-sub">
376
+ <li><a href="#">Sub item</a></li>
377
+ <li><a href="#">Sub item</a></li>
378
+ </ul>
379
+ </li>
380
+ <li class="uk-nav-header">Header</li>
381
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
382
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
383
+ <li class="uk-nav-divider"></li>
384
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
385
+ </ul>
386
+ </div>
387
+ <div>
388
+ <ul class="uk-nav uk-navbar-dropdown-nav">
389
+ <li class="uk-active"><a href="#">Active</a></li>
390
+ <li class="uk-parent">
391
+ <a href="#">Parent</a>
392
+ <ul class="uk-nav-sub">
393
+ <li><a href="#">Sub item</a></li>
394
+ <li><a href="#">Sub item</a></li>
395
+ </ul>
396
+ </li>
397
+ <li class="uk-nav-header">Header</li>
398
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
399
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
400
+ <li class="uk-nav-divider"></li>
401
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
402
+ </ul>
403
+ </div>
404
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
405
+ </div>
406
+ </div>
407
+ </li>
408
+ <li>
409
+ <a href>Stretch Full</a>
410
+ <div class="uk-navbar-dropdown" uk-drop="boundary: !.uk-navbar-container; stretch: x; flip: false">
411
+ <div class="uk-drop-grid uk-child-width-1-3@m" uk-grid>
412
+ <div>
413
+ <ul class="uk-nav uk-navbar-dropdown-nav">
414
+ <li class="uk-active"><a href="#">Active</a></li>
415
+ <li class="uk-parent">
416
+ <a href="#">Parent</a>
417
+ <ul class="uk-nav-sub">
418
+ <li><a href="#">Sub item</a></li>
419
+ <li><a href="#">Sub item</a></li>
420
+ </ul>
421
+ </li>
422
+ <li class="uk-nav-header">Header</li>
423
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
424
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
425
+ <li class="uk-nav-divider"></li>
426
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
427
+ </ul>
428
+ </div>
429
+ <div>
430
+ <ul class="uk-nav uk-navbar-dropdown-nav">
431
+ <li class="uk-active"><a href="#">Active</a></li>
432
+ <li class="uk-parent">
433
+ <a href="#">Parent</a>
434
+ <ul class="uk-nav-sub">
435
+ <li><a href="#">Sub item</a></li>
436
+ <li><a href="#">Sub item</a></li>
437
+ </ul>
438
+ </li>
439
+ <li class="uk-nav-header">Header</li>
440
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
441
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
442
+ <li class="uk-nav-divider"></li>
443
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
444
+ </ul>
445
+ </div>
446
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
447
+ </div>
448
+ </div>
449
+ </li>
450
+ </ul>
451
+
452
+ </div>
453
+ <div class="uk-navbar-right">
454
+
455
+ <ul class="uk-navbar-nav">
456
+ <li>
457
+ <a href="#">1 Column</a>
458
+ <div class="uk-navbar-dropdown">
459
+ <ul class="uk-nav uk-navbar-dropdown-nav">
460
+ <li class="uk-active"><a href="#">Active</a></li>
461
+ <li class="uk-parent">
462
+ <a href="#">Parent</a>
463
+ <ul class="uk-nav-sub">
464
+ <li><a href="#">Sub item</a></li>
465
+ <li><a href="#">Sub item</a></li>
466
+ </ul>
467
+ </li>
468
+ <li class="uk-nav-header">Header</li>
469
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
470
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
471
+ <li class="uk-nav-divider"></li>
472
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
473
+ </ul>
474
+ </div>
475
+ </li>
476
+ </ul>
477
+
478
+ </div>
479
+ </div>
480
+ </div>
481
+ </nav>
482
+
483
+ <nav class="uk-navbar-container uk-margin">
484
+ <div class="uk-container">
485
+ <div uk-navbar="align: right">
486
+ <div class="uk-navbar-left">
487
+
488
+ <ul class="uk-navbar-nav">
489
+ <li>
490
+ <a href="#">1 Column</a>
491
+ <div class="uk-navbar-dropdown">
492
+ <ul class="uk-nav uk-navbar-dropdown-nav">
493
+ <li class="uk-active"><a href="#">Active</a></li>
494
+ <li class="uk-parent">
495
+ <a href="#">Parent</a>
496
+ <ul class="uk-nav-sub">
497
+ <li><a href="#">Sub item</a></li>
498
+ <li><a href="#">Sub item</a></li>
499
+ </ul>
500
+ </li>
501
+ <li class="uk-nav-header">Header</li>
502
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
503
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
504
+ <li class="uk-nav-divider"></li>
505
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
506
+ </ul>
507
+ </div>
508
+ </li>
509
+ </ul>
510
+
511
+ </div>
512
+ <div class="uk-navbar-right">
513
+
514
+ <ul class="uk-navbar-nav">
515
+ <li class="uk-active">
516
+ <a href="#">Right</a>
517
+ <div class="uk-navbar-dropdown">
518
+ <ul class="uk-nav uk-navbar-dropdown-nav">
519
+ <li class="uk-active"><a href="#">Active</a></li>
520
+ <li class="uk-parent">
521
+ <a href="#">Parent</a>
522
+ <ul class="uk-nav-sub">
523
+ <li><a href="#">Sub item</a></li>
524
+ <li><a href="#">Sub item</a></li>
525
+ </ul>
526
+ </li>
527
+ <li class="uk-nav-header">Header</li>
528
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
529
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
530
+ <li class="uk-nav-divider"></li>
531
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
532
+ </ul>
533
+ </div>
534
+ </li>
535
+ <li>
536
+ <a href="#">2 Columns</a>
537
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
538
+ <div class="uk-drop-grid uk-child-width-1-2" uk-grid>
539
+ <div>
540
+ <ul class="uk-nav uk-navbar-dropdown-nav">
541
+ <li class="uk-active"><a href="#">Active</a></li>
542
+ <li class="uk-parent"><a href="#">Parent</a></li>
543
+ <li class="uk-nav-header">Header</li>
544
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
545
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
546
+ <li class="uk-nav-divider"></li>
547
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
548
+ </ul>
549
+ </div>
550
+ <div>
551
+ <ul class="uk-nav uk-navbar-dropdown-nav">
552
+ <li class="uk-active"><a href="#">Active</a></li>
553
+ <li class="uk-parent"><a href="#">Parent</a></li>
554
+ <li class="uk-nav-header">Header</li>
555
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
556
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
557
+ <li class="uk-nav-divider"></li>
558
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
559
+ </ul>
560
+ </div>
561
+ </div>
562
+ </div>
563
+ </li>
564
+ <li>
565
+ <a href="#">3 Columns</a>
566
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
567
+ <div class="uk-drop-grid uk-child-width-1-3" uk-grid>
568
+ <div>
569
+ <ul class="uk-nav uk-navbar-dropdown-nav">
570
+ <li class="uk-active"><a href="#">Active</a></li>
571
+ <li class="uk-parent"><a href="#">Parent</a></li>
572
+ <li class="uk-nav-header">Header</li>
573
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
574
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
575
+ </ul>
576
+ </div>
577
+ <div>
578
+ <ul class="uk-nav uk-navbar-dropdown-nav">
579
+ <li class="uk-active"><a href="#">Active</a></li>
580
+ <li class="uk-parent"><a href="#">Parent</a></li>
581
+ <li class="uk-nav-header">Header</li>
582
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
583
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
584
+ </ul>
585
+ </div>
586
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
587
+ </div>
588
+ </div>
589
+ </li>
590
+ <li>
591
+ <a href>Stretch</a>
592
+ <div class="uk-navbar-dropdown" uk-drop="boundary: !.uk-navbar; stretch: x; flip: false">
593
+ <div class="uk-drop-grid uk-child-width-1-3@m" uk-grid>
594
+ <div>
595
+ <ul class="uk-nav uk-navbar-dropdown-nav">
596
+ <li class="uk-active"><a href="#">Active</a></li>
597
+ <li class="uk-parent">
598
+ <a href="#">Parent</a>
599
+ <ul class="uk-nav-sub">
600
+ <li><a href="#">Sub item</a></li>
601
+ <li><a href="#">Sub item</a></li>
602
+ </ul>
603
+ </li>
604
+ <li class="uk-nav-header">Header</li>
605
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
606
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
607
+ <li class="uk-nav-divider"></li>
608
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
609
+ </ul>
610
+ </div>
611
+ <div>
612
+ <ul class="uk-nav uk-navbar-dropdown-nav">
613
+ <li class="uk-active"><a href="#">Active</a></li>
614
+ <li class="uk-parent">
615
+ <a href="#">Parent</a>
616
+ <ul class="uk-nav-sub">
617
+ <li><a href="#">Sub item</a></li>
618
+ <li><a href="#">Sub item</a></li>
619
+ </ul>
620
+ </li>
621
+ <li class="uk-nav-header">Header</li>
622
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
623
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
624
+ <li class="uk-nav-divider"></li>
625
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
626
+ </ul>
627
+ </div>
628
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
629
+ </div>
630
+ </div>
631
+ </li>
632
+ </ul>
633
+
634
+ </div>
635
+ </div>
636
+ </div>
637
+ </nav>
638
+
639
+ <nav class="uk-navbar-container uk-margin">
640
+ <div class="uk-container">
641
+ <div uk-navbar="align: center">
642
+ <div class="uk-navbar-left">
643
+
644
+ <ul class="uk-navbar-nav">
645
+ <li>
646
+ <a href="#">1 Column</a>
647
+ <div class="uk-navbar-dropdown">
648
+ <ul class="uk-nav uk-navbar-dropdown-nav">
649
+ <li class="uk-active"><a href="#">Active</a></li>
650
+ <li class="uk-parent">
651
+ <a href="#">Parent</a>
652
+ <ul class="uk-nav-sub">
653
+ <li><a href="#">Sub item</a></li>
654
+ <li><a href="#">Sub item</a></li>
655
+ </ul>
656
+ </li>
657
+ <li class="uk-nav-header">Header</li>
658
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
659
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
660
+ <li class="uk-nav-divider"></li>
661
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
662
+ </ul>
663
+ </div>
664
+ </li>
665
+ </ul>
666
+
667
+ </div>
668
+ <div class="uk-navbar-center">
669
+
670
+ <ul class="uk-navbar-nav">
671
+ <li class="uk-active">
672
+ <a href="#">Center</a>
673
+ <div class="uk-navbar-dropdown">
674
+ <ul class="uk-nav uk-navbar-dropdown-nav">
675
+ <li class="uk-active"><a href="#">Active</a></li>
676
+ <li class="uk-parent">
677
+ <a href="#">Parent</a>
678
+ <ul class="uk-nav-sub">
679
+ <li><a href="#">Sub item</a></li>
680
+ <li><a href="#">Sub item</a></li>
681
+ </ul>
682
+ </li>
683
+ <li class="uk-nav-header">Header</li>
684
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
685
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
686
+ <li class="uk-nav-divider"></li>
687
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
688
+ </ul>
689
+ </div>
690
+ </li>
691
+ <li>
692
+ <a href="#">2 Columns</a>
693
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
694
+ <div class="uk-drop-grid uk-child-width-1-2" uk-grid>
695
+ <div>
696
+ <ul class="uk-nav uk-navbar-dropdown-nav">
697
+ <li class="uk-active"><a href="#">Active</a></li>
698
+ <li class="uk-parent"><a href="#">Parent</a></li>
699
+ <li class="uk-nav-header">Header</li>
700
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
701
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
702
+ <li class="uk-nav-divider"></li>
703
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
704
+ </ul>
705
+ </div>
706
+ <div>
707
+ <ul class="uk-nav uk-navbar-dropdown-nav">
708
+ <li class="uk-active"><a href="#">Active</a></li>
709
+ <li class="uk-parent"><a href="#">Parent</a></li>
710
+ <li class="uk-nav-header">Header</li>
711
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
712
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
713
+ <li class="uk-nav-divider"></li>
714
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
715
+ </ul>
716
+ </div>
717
+ </div>
718
+ </div>
719
+ </li>
720
+ <li>
721
+ <a href="#">3 Columns</a>
722
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
723
+ <div class="uk-drop-grid uk-child-width-1-3" uk-grid>
724
+ <div>
725
+ <ul class="uk-nav uk-navbar-dropdown-nav">
726
+ <li class="uk-active"><a href="#">Active</a></li>
727
+ <li class="uk-parent"><a href="#">Parent</a></li>
728
+ <li class="uk-nav-header">Header</li>
729
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
730
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
731
+ </ul>
732
+ </div>
733
+ <div>
734
+ <ul class="uk-nav uk-navbar-dropdown-nav">
735
+ <li class="uk-active"><a href="#">Active</a></li>
736
+ <li class="uk-parent"><a href="#">Parent</a></li>
737
+ <li class="uk-nav-header">Header</li>
738
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
739
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
740
+ </ul>
741
+ </div>
742
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
743
+ </div>
744
+ </div>
745
+ </li>
746
+ <li>
747
+ <a href>Stretch</a>
748
+ <div class="uk-navbar-dropdown" uk-drop="boundary: !.uk-navbar; stretch: x; flip: false">
749
+ <div class="uk-drop-grid uk-child-width-1-3@m" uk-grid>
750
+ <div>
751
+ <ul class="uk-nav uk-navbar-dropdown-nav">
752
+ <li class="uk-active"><a href="#">Active</a></li>
753
+ <li class="uk-parent">
754
+ <a href="#">Parent</a>
755
+ <ul class="uk-nav-sub">
756
+ <li><a href="#">Sub item</a></li>
757
+ <li><a href="#">Sub item</a></li>
758
+ </ul>
759
+ </li>
760
+ <li class="uk-nav-header">Header</li>
761
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
762
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
763
+ <li class="uk-nav-divider"></li>
764
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
765
+ </ul>
766
+ </div>
767
+ <div>
768
+ <ul class="uk-nav uk-navbar-dropdown-nav">
769
+ <li class="uk-active"><a href="#">Active</a></li>
770
+ <li class="uk-parent">
771
+ <a href="#">Parent</a>
772
+ <ul class="uk-nav-sub">
773
+ <li><a href="#">Sub item</a></li>
774
+ <li><a href="#">Sub item</a></li>
775
+ </ul>
776
+ </li>
777
+ <li class="uk-nav-header">Header</li>
778
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
779
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
780
+ <li class="uk-nav-divider"></li>
781
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
782
+ </ul>
783
+ </div>
784
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
785
+ </div>
786
+ </div>
787
+ </li>
788
+ </ul>
789
+
790
+ </div>
791
+ <div class="uk-navbar-right">
792
+
793
+ <ul class="uk-navbar-nav">
794
+ <li>
795
+ <a href="#">1 Column</a>
796
+ <div class="uk-navbar-dropdown">
797
+ <ul class="uk-nav uk-navbar-dropdown-nav">
798
+ <li class="uk-active"><a href="#">Active</a></li>
799
+ <li class="uk-parent">
800
+ <a href="#">Parent</a>
801
+ <ul class="uk-nav-sub">
802
+ <li><a href="#">Sub item</a></li>
803
+ <li><a href="#">Sub item</a></li>
804
+ </ul>
805
+ </li>
806
+ <li class="uk-nav-header">Header</li>
807
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
808
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
809
+ <li class="uk-nav-divider"></li>
810
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
811
+ </ul>
812
+ </div>
813
+ </li>
814
+ </ul>
815
+
816
+ </div>
817
+ </div>
818
+ </div>
819
+ </nav>
820
+
821
+ <div class="uk-container uk-margin-medium-top">
822
+
823
+ <h2>Parent Icon</h2>
824
+
825
+ </div>
826
+
827
+ <nav class="uk-navbar-container uk-margin">
828
+ <div class="uk-container">
829
+ <div uk-navbar>
830
+ <div class="uk-navbar-left">
831
+
832
+ <ul class="uk-navbar-nav">
833
+ <li class="uk-active">
834
+ <a href="#">Left <span uk-navbar-parent-icon></span></a>
835
+ <div class="uk-navbar-dropdown">
836
+ <ul class="uk-nav uk-navbar-dropdown-nav">
837
+ <li class="uk-active"><a href="#">Active</a></li>
838
+ <li class="uk-parent">
839
+ <a href="#">Parent</a>
840
+ <ul class="uk-nav-sub">
841
+ <li><a href="#">Sub item</a></li>
842
+ <li><a href="#">Sub item</a></li>
843
+ </ul>
844
+ </li>
845
+ <li class="uk-nav-header">Header</li>
846
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
847
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
848
+ <li class="uk-nav-divider"></li>
849
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
850
+ </ul>
851
+ </div>
852
+ </li>
853
+ <li>
854
+ <a href="#">2 Columns <span uk-navbar-parent-icon></span></a>
855
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
856
+ <div class="uk-drop-grid uk-child-width-1-2" uk-grid>
857
+ <div>
858
+ <ul class="uk-nav uk-navbar-dropdown-nav">
859
+ <li class="uk-active"><a href="#">Active</a></li>
860
+ <li class="uk-parent"><a href="#">Parent</a></li>
861
+ <li class="uk-nav-header">Header</li>
862
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
863
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
864
+ <li class="uk-nav-divider"></li>
865
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
866
+ </ul>
867
+ </div>
868
+ <div>
869
+ <ul class="uk-nav uk-navbar-dropdown-nav">
870
+ <li class="uk-active"><a href="#">Active</a></li>
871
+ <li class="uk-parent"><a href="#">Parent</a></li>
872
+ <li class="uk-nav-header">Header</li>
873
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
874
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
875
+ <li class="uk-nav-divider"></li>
876
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
877
+ </ul>
878
+ </div>
879
+ </div>
880
+ </div>
881
+ </li>
882
+ <li>
883
+ <a href="#">3 Columns <span uk-navbar-parent-icon></span></a>
884
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
885
+ <div class="uk-drop-grid uk-child-width-1-3" uk-grid>
886
+ <div>
887
+ <ul class="uk-nav uk-navbar-dropdown-nav">
888
+ <li class="uk-active"><a href="#">Active</a></li>
889
+ <li class="uk-parent"><a href="#">Parent</a></li>
890
+ <li class="uk-nav-header">Header</li>
891
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
892
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
893
+ </ul>
894
+ </div>
895
+ <div>
896
+ <ul class="uk-nav uk-navbar-dropdown-nav">
897
+ <li class="uk-active"><a href="#">Active</a></li>
898
+ <li class="uk-parent"><a href="#">Parent</a></li>
899
+ <li class="uk-nav-header">Header</li>
900
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
901
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
902
+ </ul>
903
+ </div>
904
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
905
+ </div>
906
+ </div>
907
+ </li>
908
+ <li>
909
+ <a href>Stretch <span uk-navbar-parent-icon></span></a>
910
+ <div class="uk-navbar-dropdown" uk-drop="boundary: !.uk-navbar; stretch: x; flip: false">
911
+ <div class="uk-drop-grid uk-child-width-1-3@m" uk-grid>
912
+ <div>
913
+ <ul class="uk-nav uk-navbar-dropdown-nav">
914
+ <li class="uk-active"><a href="#">Active</a></li>
915
+ <li class="uk-parent">
916
+ <a href="#">Parent</a>
917
+ <ul class="uk-nav-sub">
918
+ <li><a href="#">Sub item</a></li>
919
+ <li><a href="#">Sub item</a></li>
920
+ </ul>
921
+ </li>
922
+ <li class="uk-nav-header">Header</li>
923
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
924
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
925
+ <li class="uk-nav-divider"></li>
926
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
927
+ </ul>
928
+ </div>
929
+ <div>
930
+ <ul class="uk-nav uk-navbar-dropdown-nav">
931
+ <li class="uk-active"><a href="#">Active</a></li>
932
+ <li class="uk-parent">
933
+ <a href="#">Parent</a>
934
+ <ul class="uk-nav-sub">
935
+ <li><a href="#">Sub item</a></li>
936
+ <li><a href="#">Sub item</a></li>
937
+ </ul>
938
+ </li>
939
+ <li class="uk-nav-header">Header</li>
940
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
941
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
942
+ <li class="uk-nav-divider"></li>
943
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
944
+ </ul>
945
+ </div>
946
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
947
+ </div>
948
+ </div>
949
+ </li>
950
+ <li>
951
+ <a href>Stretch Full <span uk-navbar-parent-icon></span></a>
952
+ <div class="uk-navbar-dropdown" uk-drop="boundary: !.uk-navbar-container; stretch: x; flip: false">
953
+ <div class="uk-drop-grid uk-child-width-1-3@m" uk-grid>
954
+ <div>
955
+ <ul class="uk-nav uk-navbar-dropdown-nav">
956
+ <li class="uk-active"><a href="#">Active</a></li>
957
+ <li class="uk-parent">
958
+ <a href="#">Parent</a>
959
+ <ul class="uk-nav-sub">
960
+ <li><a href="#">Sub item</a></li>
961
+ <li><a href="#">Sub item</a></li>
962
+ </ul>
963
+ </li>
964
+ <li class="uk-nav-header">Header</li>
965
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
966
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
967
+ <li class="uk-nav-divider"></li>
968
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
969
+ </ul>
970
+ </div>
971
+ <div>
972
+ <ul class="uk-nav uk-navbar-dropdown-nav">
973
+ <li class="uk-active"><a href="#">Active</a></li>
974
+ <li class="uk-parent">
975
+ <a href="#">Parent</a>
976
+ <ul class="uk-nav-sub">
977
+ <li><a href="#">Sub item</a></li>
978
+ <li><a href="#">Sub item</a></li>
979
+ </ul>
980
+ </li>
981
+ <li class="uk-nav-header">Header</li>
982
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
983
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
984
+ <li class="uk-nav-divider"></li>
985
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
986
+ </ul>
987
+ </div>
988
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
989
+ </div>
990
+ </div>
991
+ </li>
992
+ </ul>
993
+
994
+ </div>
995
+ <div class="uk-navbar-right">
996
+
997
+ <ul class="uk-navbar-nav">
998
+ <li>
999
+ <a href="#">1 Column <span uk-navbar-parent-icon></span></a>
1000
+ <div class="uk-navbar-dropdown">
1001
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1002
+ <li class="uk-active"><a href="#">Active</a></li>
1003
+ <li class="uk-parent">
1004
+ <a href="#">Parent</a>
1005
+ <ul class="uk-nav-sub">
1006
+ <li><a href="#">Sub item</a></li>
1007
+ <li><a href="#">Sub item</a></li>
1008
+ </ul>
1009
+ </li>
1010
+ <li class="uk-nav-header">Header</li>
1011
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1012
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1013
+ <li class="uk-nav-divider"></li>
1014
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1015
+ </ul>
1016
+ </div>
1017
+ </li>
1018
+ </ul>
1019
+
1020
+ </div>
1021
+ </div>
1022
+ </div>
1023
+ </nav>
1024
+
1025
+ <div class="uk-container uk-margin-medium-top">
1026
+
1027
+ <h2>Dropbar</h2>
1028
+
1029
+ <div class="uk-margin">
1030
+ <select id="js-dropbar-size-switcher" class="uk-select uk-form-width-small" aria-label="Dropbar size switcher">
1031
+ <option value="">Default</option>
1032
+ <option value="uk-navbar-dropdown-dropbar-large">Large</option>
1033
+ </select>
1034
+ </div>
1035
+
1036
+ <p>First example using <code>dropbar: SELECTOR</code> and second example using <code>dropbar: true</code>.</p>
1037
+
1038
+ </div>
1039
+
1040
+ <nav class="uk-navbar-container uk-margin-top"><!-- Margin top only because of dropbar follows already in markup -->
1041
+ <div class="uk-container">
1042
+ <div uk-navbar="target-y: !.uk-navbar-container; dropbar: !.uk-navbar-container + .uk-navbar-dropbar">
1043
+ <div class="uk-navbar-left">
1044
+
1045
+ <ul class="uk-navbar-nav">
1046
+ <li class="uk-active">
1047
+ <a href="#">Left</a>
1048
+ <div class="uk-navbar-dropdown">
1049
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1050
+ <li class="uk-active"><a href="#">Active</a></li>
1051
+ <li class="uk-parent">
1052
+ <a href="#">Parent</a>
1053
+ <ul class="uk-nav-sub">
1054
+ <li><a href="#">Sub item</a></li>
1055
+ <li><a href="#">Sub item</a></li>
1056
+ </ul>
1057
+ </li>
1058
+ <li class="uk-nav-header">Header</li>
1059
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1060
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1061
+ <li class="uk-nav-divider"></li>
1062
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1063
+ </ul>
1064
+ </div>
1065
+ </li>
1066
+ <li>
1067
+ <a href="#">2 Columns</a>
1068
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
1069
+ <div class="uk-drop-grid uk-child-width-1-2" uk-grid>
1070
+ <div>
1071
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1072
+ <li class="uk-active"><a href="#">Active</a></li>
1073
+ <li class="uk-parent"><a href="#">Parent</a></li>
1074
+ <li class="uk-nav-header">Header</li>
1075
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1076
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1077
+ <li class="uk-nav-divider"></li>
1078
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1079
+ </ul>
1080
+ </div>
1081
+ <div>
1082
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1083
+ <li class="uk-active"><a href="#">Active</a></li>
1084
+ <li class="uk-parent"><a href="#">Parent</a></li>
1085
+ <li class="uk-nav-header">Header</li>
1086
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1087
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1088
+ <li class="uk-nav-divider"></li>
1089
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1090
+ </ul>
1091
+ </div>
1092
+ </div>
1093
+ </div>
1094
+ </li>
1095
+ <li>
1096
+ <a href="#">3 Columns</a>
1097
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
1098
+ <div class="uk-drop-grid uk-child-width-1-3" uk-grid>
1099
+ <div>
1100
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1101
+ <li class="uk-active"><a href="#">Active</a></li>
1102
+ <li class="uk-parent"><a href="#">Parent</a></li>
1103
+ <li class="uk-nav-header">Header</li>
1104
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1105
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1106
+ </ul>
1107
+ </div>
1108
+ <div>
1109
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1110
+ <li class="uk-active"><a href="#">Active</a></li>
1111
+ <li class="uk-parent"><a href="#">Parent</a></li>
1112
+ <li class="uk-nav-header">Header</li>
1113
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1114
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1115
+ </ul>
1116
+ </div>
1117
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
1118
+ </div>
1119
+ </div>
1120
+ </li>
1121
+ <li>
1122
+ <a href>Stretch</a>
1123
+ <div class="uk-navbar-dropdown" uk-drop="boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
1124
+ <div class="uk-drop-grid uk-child-width-1-3@m" uk-grid>
1125
+ <div>
1126
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1127
+ <li class="uk-active"><a href="#">Active</a></li>
1128
+ <li class="uk-parent">
1129
+ <a href="#">Parent</a>
1130
+ <ul class="uk-nav-sub">
1131
+ <li><a href="#">Sub item</a></li>
1132
+ <li><a href="#">Sub item</a></li>
1133
+ </ul>
1134
+ </li>
1135
+ <li class="uk-nav-header">Header</li>
1136
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1137
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1138
+ <li class="uk-nav-divider"></li>
1139
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1140
+ </ul>
1141
+ </div>
1142
+ <div>
1143
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1144
+ <li class="uk-active"><a href="#">Active</a></li>
1145
+ <li class="uk-parent">
1146
+ <a href="#">Parent</a>
1147
+ <ul class="uk-nav-sub">
1148
+ <li><a href="#">Sub item</a></li>
1149
+ <li><a href="#">Sub item</a></li>
1150
+ </ul>
1151
+ </li>
1152
+ <li class="uk-nav-header">Header</li>
1153
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1154
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1155
+ <li class="uk-nav-divider"></li>
1156
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1157
+ </ul>
1158
+ </div>
1159
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
1160
+ </div>
1161
+ </div>
1162
+ </li>
1163
+ <li>
1164
+ <a href>Stretch Full</a>
1165
+ <div class="uk-navbar-dropdown" uk-drop="boundary: !.uk-navbar-container; stretch: x; flip: false; target-y: !.uk-navbar-container">
1166
+ <div class="uk-drop-grid uk-child-width-1-3@m" uk-grid>
1167
+ <div>
1168
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1169
+ <li class="uk-active"><a href="#">Active</a></li>
1170
+ <li class="uk-parent">
1171
+ <a href="#">Parent</a>
1172
+ <ul class="uk-nav-sub">
1173
+ <li><a href="#">Sub item</a></li>
1174
+ <li><a href="#">Sub item</a></li>
1175
+ </ul>
1176
+ </li>
1177
+ <li class="uk-nav-header">Header</li>
1178
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1179
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1180
+ <li class="uk-nav-divider"></li>
1181
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1182
+ </ul>
1183
+ </div>
1184
+ <div>
1185
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1186
+ <li class="uk-active"><a href="#">Active</a></li>
1187
+ <li class="uk-parent">
1188
+ <a href="#">Parent</a>
1189
+ <ul class="uk-nav-sub">
1190
+ <li><a href="#">Sub item</a></li>
1191
+ <li><a href="#">Sub item</a></li>
1192
+ </ul>
1193
+ </li>
1194
+ <li class="uk-nav-header">Header</li>
1195
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1196
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1197
+ <li class="uk-nav-divider"></li>
1198
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1199
+ </ul>
1200
+ </div>
1201
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
1202
+ </div>
1203
+ </div>
1204
+ </li>
1205
+ </ul>
1206
+
1207
+ </div>
1208
+ <div class="uk-navbar-right">
1209
+
1210
+ <ul class="uk-navbar-nav">
1211
+ <li>
1212
+ <a href="#">1 Column</a>
1213
+ <div class="uk-navbar-dropdown">
1214
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1215
+ <li class="uk-active"><a href="#">Active</a></li>
1216
+ <li class="uk-parent">
1217
+ <a href="#">Parent</a>
1218
+ <ul class="uk-nav-sub">
1219
+ <li><a href="#">Sub item</a></li>
1220
+ <li><a href="#">Sub item</a></li>
1221
+ </ul>
1222
+ </li>
1223
+ <li class="uk-nav-header">Header</li>
1224
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1225
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1226
+ <li class="uk-nav-divider"></li>
1227
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1228
+ </ul>
1229
+ </div>
1230
+ </li>
1231
+ </ul>
1232
+
1233
+ </div>
1234
+ </div>
1235
+ </div>
1236
+ </nav>
1237
+
1238
+ <div class="uk-dropbar uk-dropbar-top uk-navbar-dropbar"></div>
1239
+
1240
+ <nav class="uk-navbar-container uk-margin">
1241
+ <div class="uk-container">
1242
+ <div uk-navbar="target-y: !.uk-navbar-container; dropbar: true; dropbar-anchor: !.uk-navbar-container; align: right">
1243
+ <div class="uk-navbar-left">
1244
+
1245
+ <ul class="uk-navbar-nav">
1246
+ <li>
1247
+ <a href="#">1 Column</a>
1248
+ <div class="uk-navbar-dropdown">
1249
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1250
+ <li class="uk-active"><a href="#">Active</a></li>
1251
+ <li class="uk-parent">
1252
+ <a href="#">Parent</a>
1253
+ <ul class="uk-nav-sub">
1254
+ <li><a href="#">Sub item</a></li>
1255
+ <li><a href="#">Sub item</a></li>
1256
+ </ul>
1257
+ </li>
1258
+ <li class="uk-nav-header">Header</li>
1259
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1260
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1261
+ <li class="uk-nav-divider"></li>
1262
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1263
+ </ul>
1264
+ </div>
1265
+ </li>
1266
+ </ul>
1267
+
1268
+ </div>
1269
+ <div class="uk-navbar-right">
1270
+
1271
+ <ul class="uk-navbar-nav">
1272
+ <li class="uk-active">
1273
+ <a href="#">Right</a>
1274
+ <div class="uk-navbar-dropdown">
1275
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1276
+ <li class="uk-active"><a href="#">Active</a></li>
1277
+ <li class="uk-parent">
1278
+ <a href="#">Parent</a>
1279
+ <ul class="uk-nav-sub">
1280
+ <li><a href="#">Sub item</a></li>
1281
+ <li><a href="#">Sub item</a></li>
1282
+ </ul>
1283
+ </li>
1284
+ <li class="uk-nav-header">Header</li>
1285
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1286
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1287
+ <li class="uk-nav-divider"></li>
1288
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1289
+ </ul>
1290
+ </div>
1291
+ </li>
1292
+ <li>
1293
+ <a href="#">2 Columns</a>
1294
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
1295
+ <div class="uk-drop-grid uk-child-width-1-2" uk-grid>
1296
+ <div>
1297
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1298
+ <li class="uk-active"><a href="#">Active</a></li>
1299
+ <li class="uk-parent"><a href="#">Parent</a></li>
1300
+ <li class="uk-nav-header">Header</li>
1301
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1302
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1303
+ <li class="uk-nav-divider"></li>
1304
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1305
+ </ul>
1306
+ </div>
1307
+ <div>
1308
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1309
+ <li class="uk-active"><a href="#">Active</a></li>
1310
+ <li class="uk-parent"><a href="#">Parent</a></li>
1311
+ <li class="uk-nav-header">Header</li>
1312
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1313
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1314
+ <li class="uk-nav-divider"></li>
1315
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1316
+ </ul>
1317
+ </div>
1318
+ </div>
1319
+ </div>
1320
+ </li>
1321
+ <li>
1322
+ <a href="#">3 Columns</a>
1323
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
1324
+ <div class="uk-drop-grid uk-child-width-1-3" uk-grid>
1325
+ <div>
1326
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1327
+ <li class="uk-active"><a href="#">Active</a></li>
1328
+ <li class="uk-parent"><a href="#">Parent</a></li>
1329
+ <li class="uk-nav-header">Header</li>
1330
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1331
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1332
+ </ul>
1333
+ </div>
1334
+ <div>
1335
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1336
+ <li class="uk-active"><a href="#">Active</a></li>
1337
+ <li class="uk-parent"><a href="#">Parent</a></li>
1338
+ <li class="uk-nav-header">Header</li>
1339
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1340
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1341
+ </ul>
1342
+ </div>
1343
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
1344
+ </div>
1345
+ </div>
1346
+ </li>
1347
+ <li>
1348
+ <a href>Stretch</a>
1349
+ <div class="uk-navbar-dropdown" uk-drop="boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
1350
+ <div class="uk-drop-grid uk-child-width-1-3@m" uk-grid>
1351
+ <div>
1352
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1353
+ <li class="uk-active"><a href="#">Active</a></li>
1354
+ <li class="uk-parent">
1355
+ <a href="#">Parent</a>
1356
+ <ul class="uk-nav-sub">
1357
+ <li><a href="#">Sub item</a></li>
1358
+ <li><a href="#">Sub item</a></li>
1359
+ </ul>
1360
+ </li>
1361
+ <li class="uk-nav-header">Header</li>
1362
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1363
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1364
+ <li class="uk-nav-divider"></li>
1365
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1366
+ </ul>
1367
+ </div>
1368
+ <div>
1369
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1370
+ <li class="uk-active"><a href="#">Active</a></li>
1371
+ <li class="uk-parent">
1372
+ <a href="#">Parent</a>
1373
+ <ul class="uk-nav-sub">
1374
+ <li><a href="#">Sub item</a></li>
1375
+ <li><a href="#">Sub item</a></li>
1376
+ </ul>
1377
+ </li>
1378
+ <li class="uk-nav-header">Header</li>
1379
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1380
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1381
+ <li class="uk-nav-divider"></li>
1382
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1383
+ </ul>
1384
+ </div>
1385
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
1386
+ </div>
1387
+ </div>
1388
+ </li>
1389
+ </ul>
1390
+
1391
+ </div>
1392
+ </div>
1393
+ </div>
1394
+ </nav>
1395
+
1396
+ <nav class="uk-navbar-container uk-margin">
1397
+ <div class="uk-container">
1398
+ <div uk-navbar="target-y: !.uk-navbar-container; dropbar: true; dropbar-anchor: !.uk-navbar-container; align: center">
1399
+ <div class="uk-navbar-left">
1400
+
1401
+ <ul class="uk-navbar-nav">
1402
+ <li>
1403
+ <a href="#">1 Column</a>
1404
+ <div class="uk-navbar-dropdown">
1405
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1406
+ <li class="uk-active"><a href="#">Active</a></li>
1407
+ <li class="uk-parent">
1408
+ <a href="#">Parent</a>
1409
+ <ul class="uk-nav-sub">
1410
+ <li><a href="#">Sub item</a></li>
1411
+ <li><a href="#">Sub item</a></li>
1412
+ </ul>
1413
+ </li>
1414
+ <li class="uk-nav-header">Header</li>
1415
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1416
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1417
+ <li class="uk-nav-divider"></li>
1418
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1419
+ </ul>
1420
+ </div>
1421
+ </li>
1422
+ </ul>
1423
+
1424
+ </div>
1425
+ <div class="uk-navbar-center">
1426
+
1427
+ <ul class="uk-navbar-nav">
1428
+ <li class="uk-active">
1429
+ <a href="#">Center</a>
1430
+ <div class="uk-navbar-dropdown">
1431
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1432
+ <li class="uk-active"><a href="#">Active</a></li>
1433
+ <li class="uk-parent">
1434
+ <a href="#">Parent</a>
1435
+ <ul class="uk-nav-sub">
1436
+ <li><a href="#">Sub item</a></li>
1437
+ <li><a href="#">Sub item</a></li>
1438
+ </ul>
1439
+ </li>
1440
+ <li class="uk-nav-header">Header</li>
1441
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1442
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1443
+ <li class="uk-nav-divider"></li>
1444
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1445
+ </ul>
1446
+ </div>
1447
+ </li>
1448
+ <li>
1449
+ <a href="#">2 Columns</a>
1450
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
1451
+ <div class="uk-drop-grid uk-child-width-1-2" uk-grid>
1452
+ <div>
1453
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1454
+ <li class="uk-active"><a href="#">Active</a></li>
1455
+ <li class="uk-parent"><a href="#">Parent</a></li>
1456
+ <li class="uk-nav-header">Header</li>
1457
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1458
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1459
+ <li class="uk-nav-divider"></li>
1460
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1461
+ </ul>
1462
+ </div>
1463
+ <div>
1464
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1465
+ <li class="uk-active"><a href="#">Active</a></li>
1466
+ <li class="uk-parent"><a href="#">Parent</a></li>
1467
+ <li class="uk-nav-header">Header</li>
1468
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1469
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1470
+ <li class="uk-nav-divider"></li>
1471
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1472
+ </ul>
1473
+ </div>
1474
+ </div>
1475
+ </div>
1476
+ </li>
1477
+ <li>
1478
+ <a href="#">3 Columns</a>
1479
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
1480
+ <div class="uk-drop-grid uk-child-width-1-3" uk-grid>
1481
+ <div>
1482
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1483
+ <li class="uk-active"><a href="#">Active</a></li>
1484
+ <li class="uk-parent"><a href="#">Parent</a></li>
1485
+ <li class="uk-nav-header">Header</li>
1486
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1487
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1488
+ </ul>
1489
+ </div>
1490
+ <div>
1491
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1492
+ <li class="uk-active"><a href="#">Active</a></li>
1493
+ <li class="uk-parent"><a href="#">Parent</a></li>
1494
+ <li class="uk-nav-header">Header</li>
1495
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1496
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1497
+ </ul>
1498
+ </div>
1499
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
1500
+ </div>
1501
+ </div>
1502
+ </li>
1503
+ <li>
1504
+ <a href>Stretch</a>
1505
+ <div class="uk-navbar-dropdown" uk-drop="boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
1506
+ <div class="uk-drop-grid uk-child-width-1-3@m" uk-grid>
1507
+ <div>
1508
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1509
+ <li class="uk-active"><a href="#">Active</a></li>
1510
+ <li class="uk-parent">
1511
+ <a href="#">Parent</a>
1512
+ <ul class="uk-nav-sub">
1513
+ <li><a href="#">Sub item</a></li>
1514
+ <li><a href="#">Sub item</a></li>
1515
+ </ul>
1516
+ </li>
1517
+ <li class="uk-nav-header">Header</li>
1518
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1519
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1520
+ <li class="uk-nav-divider"></li>
1521
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1522
+ </ul>
1523
+ </div>
1524
+ <div>
1525
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1526
+ <li class="uk-active"><a href="#">Active</a></li>
1527
+ <li class="uk-parent">
1528
+ <a href="#">Parent</a>
1529
+ <ul class="uk-nav-sub">
1530
+ <li><a href="#">Sub item</a></li>
1531
+ <li><a href="#">Sub item</a></li>
1532
+ </ul>
1533
+ </li>
1534
+ <li class="uk-nav-header">Header</li>
1535
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1536
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1537
+ <li class="uk-nav-divider"></li>
1538
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1539
+ </ul>
1540
+ </div>
1541
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
1542
+ </div>
1543
+ </div>
1544
+ </li>
1545
+ </ul>
1546
+
1547
+ </div>
1548
+ <div class="uk-navbar-right">
1549
+
1550
+ <ul class="uk-navbar-nav">
1551
+ <li>
1552
+ <a href="#">1 Column</a>
1553
+ <div class="uk-navbar-dropdown">
1554
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1555
+ <li class="uk-active"><a href="#">Active</a></li>
1556
+ <li class="uk-parent">
1557
+ <a href="#">Parent</a>
1558
+ <ul class="uk-nav-sub">
1559
+ <li><a href="#">Sub item</a></li>
1560
+ <li><a href="#">Sub item</a></li>
1561
+ </ul>
1562
+ </li>
1563
+ <li class="uk-nav-header">Header</li>
1564
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1565
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1566
+ <li class="uk-nav-divider"></li>
1567
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1568
+ </ul>
1569
+ </div>
1570
+ </li>
1571
+ </ul>
1572
+
1573
+ </div>
1574
+ </div>
1575
+ </div>
1576
+ </nav>
1577
+
1578
+ <div class="uk-container uk-margin-medium-top">
1579
+
1580
+ <h2>Icons and Subtitles</h2>
1581
+
1582
+ </div>
1583
+
1584
+ <nav class="uk-navbar-container uk-margin">
1585
+ <div class="uk-container">
1586
+ <div uk-navbar>
1587
+ <div class="uk-navbar-left">
1588
+
1589
+ <ul class="uk-navbar-nav">
1590
+ <li><a href="#"><span uk-icon="icon: home"></span></a></li>
1591
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: home"></span> Item</a></li>
1592
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: cart"></span> Item</a></li>
1593
+ <li><a href="#">Item</a></li>
1594
+ <li><a href="#">
1595
+ <div>
1596
+ Item <div class="uk-navbar-subtitle">Subtitle</div>
1597
+ </div>
1598
+ </a></li>
1599
+ <li><a href="#">
1600
+ <div>
1601
+ Item <div class="uk-navbar-subtitle">Subtitle</div>
1602
+ </div>
1603
+ </a></li>
1604
+ <li><a href="#">
1605
+ <div class="uk-flex uk-flex-middle">
1606
+ <span class="uk-margin-xsmall-right" uk-icon="icon: home; ratio: 1.5"></span>
1607
+ <div>Item <div class="uk-navbar-subtitle">Subtitle</div></div>
1608
+ </div>
1609
+ </a></li>
1610
+ <li><a href="#">
1611
+ <div class="uk-flex uk-flex-middle">
1612
+ <span class="uk-margin-xsmall-right" uk-icon="icon: cart; ratio: 1.5"></span>
1613
+ <div>Item <div class="uk-navbar-subtitle">Subtitle</div></div>
1614
+ </div>
1615
+ </a></li>
1616
+ </ul>
1617
+
1618
+ </div>
1619
+ </div>
1620
+ </div>
1621
+ </nav>
1622
+
1623
+ <div class="uk-container uk-margin-medium-top">
1624
+
1625
+ <h2>Content Items</h2>
1626
+
1627
+ </div>
1628
+
1629
+ <nav class="uk-navbar-container uk-margin">
1630
+ <div class="uk-container">
1631
+ <div class="uk-navbar" uk-navbar>
1632
+ <div class="uk-navbar-left">
1633
+
1634
+ <ul class="uk-navbar-nav">
1635
+ <li><a href="#">Item</a></li>
1636
+ </ul>
1637
+ <div class="uk-navbar-item">
1638
+ <div>Some <a href="#">Link</a></div>
1639
+ </div>
1640
+ <div class="uk-navbar-item">
1641
+ <ul class="uk-iconnav">
1642
+ <li>
1643
+ <a href="#" uk-icon="icon: user"></a>
1644
+ </li>
1645
+ <li>
1646
+ <a href="#" uk-icon="icon: bag"></a>
1647
+ </li>
1648
+ <li>
1649
+ <a href="#" uk-icon="icon: heart"></a>
1650
+ </li>
1651
+ </ul>
1652
+ </div>
1653
+ <div class="uk-navbar-item"><img src="images/photo.jpg" width="100" height="67" alt=""></div>
1654
+ <div class="uk-navbar-item">
1655
+ <form>
1656
+ <input class="uk-input uk-form-width-medium" type="text" placeholder="Input" aria-label="Input">
1657
+ <button class="uk-button uk-button-default">Button</button>
1658
+ </form>
1659
+ </div>
1660
+ <div class="uk-navbar-item">
1661
+ <ul class="uk-grid uk-grid-small">
1662
+ <li>
1663
+ <a class="uk-icon-button" href="#" uk-icon="icon: instagram"></a>
1664
+ </li>
1665
+ <li>
1666
+ <a class="uk-icon-button" href="#" uk-icon="icon: github"></a>
1667
+ </li>
1668
+ <li>
1669
+ <a class="uk-icon-button" href="#" uk-icon="icon: youtube"></a>
1670
+ </li>
1671
+ </ul>
1672
+ </div>
1673
+
1674
+ </div>
1675
+ </div>
1676
+ </div>
1677
+ </nav>
1678
+
1679
+ <div class="uk-container uk-margin-medium-top">
1680
+
1681
+ <h2>Logo and Toggle</h2>
1682
+
1683
+ </div>
1684
+
1685
+ <nav class="uk-navbar-container uk-margin">
1686
+ <div class="uk-container">
1687
+ <div uk-navbar>
1688
+ <div class="uk-navbar-left">
1689
+
1690
+ <a class="uk-navbar-item uk-logo" href="#">Logo</a>
1691
+ <ul class="uk-navbar-nav uk-navbar-nav-primary">
1692
+ <li class="uk-active"><a href="#">Active</a></li>
1693
+ <li>
1694
+ <a href="#">Parent</a>
1695
+ <div class="uk-navbar-dropdown">
1696
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1697
+ <li class="uk-active"><a href="#">Active</a></li>
1698
+ <li class="uk-parent">
1699
+ <a href="#">Parent</a>
1700
+ <ul class="uk-nav-sub">
1701
+ <li><a href="#">Sub item</a></li>
1702
+ <li><a href="#">Sub item</a></li>
1703
+ </ul>
1704
+ </li>
1705
+ <li class="uk-nav-header">Header</li>
1706
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1707
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1708
+ <li class="uk-nav-divider"></li>
1709
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1710
+ </ul>
1711
+ </div>
1712
+ </li>
1713
+ <li>
1714
+ <a href="#">Content</a>
1715
+ <div class="uk-navbar-dropdown">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
1716
+ </li>
1717
+ <li><a href="#">Item</a></li>
1718
+ <li><a href="#">Item</a></li>
1719
+ </ul>
1720
+
1721
+ </div>
1722
+ <div class="uk-navbar-right">
1723
+
1724
+ <a class="uk-navbar-toggle" href uk-navbar-toggle-icon></a>
1725
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; boundary: !.uk-navbar; flip: false">Dropdown</div>
1726
+
1727
+ </div>
1728
+ </div>
1729
+ </div>
1730
+ </nav>
1731
+
1732
+ <nav class="uk-navbar-container uk-margin">
1733
+ <div class="uk-container">
1734
+ <div uk-navbar>
1735
+ <div class="uk-navbar-left">
1736
+
1737
+ <a class="uk-navbar-item uk-logo" href="#">Logo</a>
1738
+ <ul class="uk-navbar-nav uk-navbar-nav-primary">
1739
+ <li class="uk-active"><a href="#">Active</a></li>
1740
+ <li>
1741
+ <a href="#">Parent</a>
1742
+ <div class="uk-navbar-dropdown">
1743
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1744
+ <li class="uk-active"><a href="#">Active</a></li>
1745
+ <li class="uk-parent">
1746
+ <a href="#">Parent</a>
1747
+ <ul class="uk-nav-sub">
1748
+ <li><a href="#">Sub item</a></li>
1749
+ <li><a href="#">Sub item</a></li>
1750
+ </ul>
1751
+ </li>
1752
+ <li class="uk-nav-header">Header</li>
1753
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1754
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1755
+ <li class="uk-nav-divider"></li>
1756
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1757
+ </ul>
1758
+ </div>
1759
+ </li>
1760
+ <li>
1761
+ <a href="#">Content</a>
1762
+ <div class="uk-navbar-dropdown">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
1763
+ </li>
1764
+ <li><a href="#">Item</a></li>
1765
+ <li><a href="#">Item</a></li>
1766
+ </ul>
1767
+
1768
+ </div>
1769
+ <div class="uk-navbar-right">
1770
+
1771
+ <a class="uk-navbar-toggle" href="#">
1772
+ <span class="uk-margin-xsmall-right">Menu</span> <span uk-navbar-toggle-icon></span>
1773
+ </a>
1774
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; boundary: !.uk-navbar; flip: false">Dropdown</div>
1775
+
1776
+ </div>
1777
+ </div>
1778
+ </div>
1779
+ </nav>
1780
+
1781
+ <div class="uk-container uk-margin-medium-top">
1782
+
1783
+ <h2>Primary</h2>
1784
+
1785
+ </div>
1786
+
1787
+ <nav class="uk-navbar-container uk-margin">
1788
+ <div class="uk-container">
1789
+ <div class="uk-navbar-primary" uk-navbar>
1790
+ <div class="uk-navbar-left">
1791
+
1792
+ <a class="uk-navbar-item uk-logo" href="#">Logo</a>
1793
+ <ul class="uk-navbar-nav uk-navbar-nav-primary">
1794
+ <li class="uk-active"><a href="#">Active</a></li>
1795
+ <li>
1796
+ <a href="#">Parent</a>
1797
+ <div class="uk-navbar-dropdown">
1798
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1799
+ <li class="uk-active"><a href="#">Active</a></li>
1800
+ <li class="uk-parent">
1801
+ <a href="#">Parent</a>
1802
+ <ul class="uk-nav-sub">
1803
+ <li><a href="#">Sub item</a></li>
1804
+ <li><a href="#">Sub item</a></li>
1805
+ </ul>
1806
+ </li>
1807
+ <li class="uk-nav-header">Header</li>
1808
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1809
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1810
+ <li class="uk-nav-divider"></li>
1811
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1812
+ </ul>
1813
+ </div>
1814
+ </li>
1815
+ <li>
1816
+ <a href="#">Content</a>
1817
+ <div class="uk-navbar-dropdown">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
1818
+ </li>
1819
+ <li><a href="#">Item</a></li>
1820
+ <li><a href="#">Item</a></li>
1821
+ </ul>
1822
+
1823
+ </div>
1824
+ <div class="uk-navbar-right">
1825
+
1826
+ <a class="uk-navbar-toggle" href uk-navbar-toggle-icon></a>
1827
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; boundary: !.uk-navbar; flip: false">Dropdown</div>
1828
+
1829
+ </div>
1830
+ </div>
1831
+ </div>
1832
+ </nav>
1833
+
1834
+ <div class="uk-container uk-margin-medium-top">
1835
+
1836
+ <h2>Center</h2>
1837
+
1838
+ </div>
1839
+
1840
+ <nav class="uk-navbar-container uk-margin">
1841
+ <div class="uk-container">
1842
+ <div uk-navbar>
1843
+ <div class="uk-navbar-left">
1844
+
1845
+ <ul class="uk-navbar-nav">
1846
+ <li>
1847
+ <a href="#">Left</a>
1848
+ <div class="uk-navbar-dropdown">
1849
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1850
+ <li class="uk-active"><a href="#">Active</a></li>
1851
+ <li class="uk-parent">
1852
+ <a href="#">Parent</a>
1853
+ <ul class="uk-nav-sub">
1854
+ <li><a href="#">Sub item</a></li>
1855
+ <li><a href="#">Sub item</a></li>
1856
+ </ul>
1857
+ </li>
1858
+ <li class="uk-nav-header">Header</li>
1859
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1860
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1861
+ <li class="uk-nav-divider"></li>
1862
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1863
+ </ul>
1864
+ </div>
1865
+ </li>
1866
+ </ul>
1867
+
1868
+ </div>
1869
+ <div class="uk-navbar-center">
1870
+
1871
+ <ul class="uk-navbar-nav">
1872
+ <li class="uk-active"><a href="#">Active</a></li>
1873
+ <li>
1874
+ <a href="#">Parent</a>
1875
+ <div class="uk-navbar-dropdown">
1876
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1877
+ <li class="uk-active"><a href="#">Active</a></li>
1878
+ <li class="uk-parent">
1879
+ <a href="#">Parent</a>
1880
+ <ul class="uk-nav-sub">
1881
+ <li><a href="#">Sub item</a></li>
1882
+ <li><a href="#">Sub item</a></li>
1883
+ </ul>
1884
+ </li>
1885
+ <li class="uk-nav-header">Header</li>
1886
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1887
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1888
+ <li class="uk-nav-divider"></li>
1889
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1890
+ </ul>
1891
+ </div>
1892
+ </li>
1893
+ <li>
1894
+ <a href="#">Content</a>
1895
+ <div class="uk-navbar-dropdown">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
1896
+ </li>
1897
+ </ul>
1898
+ <div class="uk-navbar-item">
1899
+ <div>Some <a href="#">Link</a></div>
1900
+ </div>
1901
+
1902
+ </div>
1903
+ <div class="uk-navbar-right">
1904
+
1905
+ <ul class="uk-navbar-nav">
1906
+ <li>
1907
+ <a href="#">Right</a>
1908
+ <div class="uk-navbar-dropdown">
1909
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1910
+ <li class="uk-active"><a href="#">Active</a></li>
1911
+ <li class="uk-parent">
1912
+ <a href="#">Parent</a>
1913
+ <ul class="uk-nav-sub">
1914
+ <li><a href="#">Sub item</a></li>
1915
+ <li><a href="#">Sub item</a></li>
1916
+ </ul>
1917
+ </li>
1918
+ <li class="uk-nav-header">Header</li>
1919
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1920
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1921
+ <li class="uk-nav-divider"></li>
1922
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1923
+ </ul>
1924
+ </div>
1925
+ </li>
1926
+ </ul>
1927
+
1928
+ </div>
1929
+ </div>
1930
+ </div>
1931
+ </nav>
1932
+
1933
+ <nav class="uk-navbar-container uk-margin">
1934
+ <div class="uk-container">
1935
+ <div uk-navbar>
1936
+ <div class="uk-navbar-center">
1937
+
1938
+ <div class="uk-navbar-center-left">
1939
+ <ul class="uk-navbar-nav">
1940
+ <li class="uk-active"><a href="#">Active</a></li>
1941
+ <li>
1942
+ <a href>Parent</a>
1943
+ <div class="uk-navbar-dropdown">
1944
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1945
+ <li class="uk-active"><a href="#">Active</a></li>
1946
+ <li class="uk-parent">
1947
+ <a href="#">Parent</a>
1948
+ <ul class="uk-nav-sub">
1949
+ <li><a href="#">Sub item</a></li>
1950
+ <li><a href="#">Sub item</a></li>
1951
+ </ul>
1952
+ </li>
1953
+ <li class="uk-nav-header">Header</li>
1954
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1955
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1956
+ <li class="uk-nav-divider"></li>
1957
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1958
+ </ul>
1959
+ </div>
1960
+ </li>
1961
+ <li>
1962
+ <a href="#">Content</a>
1963
+ <div class="uk-navbar-dropdown">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
1964
+ </li>
1965
+ </ul>
1966
+ </div>
1967
+
1968
+ <a class="uk-navbar-item uk-logo" href="#">Logo</a>
1969
+
1970
+ <div class="uk-navbar-center-right">
1971
+ <ul class="uk-navbar-nav">
1972
+ <li>
1973
+ <a href>Parent</a>
1974
+ <div class="uk-navbar-dropdown">
1975
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1976
+ <li class="uk-active"><a href="#">Active</a></li>
1977
+ <li class="uk-parent">
1978
+ <a href="#">Parent</a>
1979
+ <ul class="uk-nav-sub">
1980
+ <li><a href="#">Sub item</a></li>
1981
+ <li><a href="#">Sub item</a></li>
1982
+ </ul>
1983
+ </li>
1984
+ <li class="uk-nav-header">Header</li>
1985
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1986
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1987
+ <li class="uk-nav-divider"></li>
1988
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1989
+ </ul>
1990
+ </div>
1991
+ </li>
1992
+ <li>
1993
+ <a href="#">Content</a>
1994
+ <div class="uk-navbar-dropdown">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
1995
+ </li>
1996
+ </ul>
1997
+ <div class="uk-navbar-item">
1998
+ <div>Some <a href="#">Link</a></div>
1999
+ </div>
2000
+ </div>
2001
+
2002
+ </div>
2003
+ </div>
2004
+ </div>
2005
+ </nav>
2006
+
2007
+ <nav class="uk-navbar-container uk-margin">
2008
+ <div class="uk-container">
2009
+ <div uk-navbar>
2010
+ <div class="uk-navbar-left">
2011
+
2012
+ <ul class="uk-navbar-nav">
2013
+ <li>
2014
+ <a href="#">Left</a>
2015
+ <div class="uk-navbar-dropdown">
2016
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2017
+ <li class="uk-active"><a href="#">Active</a></li>
2018
+ <li class="uk-parent">
2019
+ <a href="#">Parent</a>
2020
+ <ul class="uk-nav-sub">
2021
+ <li><a href="#">Sub item</a></li>
2022
+ <li><a href="#">Sub item</a></li>
2023
+ </ul>
2024
+ </li>
2025
+ <li class="uk-nav-header">Header</li>
2026
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
2027
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2028
+ <li class="uk-nav-divider"></li>
2029
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
2030
+ </ul>
2031
+ </div>
2032
+ </li>
2033
+ </ul>
2034
+
2035
+ </div>
2036
+ <div class="uk-navbar-center">
2037
+
2038
+ <div class="uk-navbar-center-left">
2039
+ <ul class="uk-navbar-nav">
2040
+ <li class="uk-active"><a href="#">Active</a></li>
2041
+ <li>
2042
+ <a href>Parent</a>
2043
+ <div class="uk-navbar-dropdown">
2044
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2045
+ <li class="uk-active"><a href="#">Active</a></li>
2046
+ <li class="uk-parent">
2047
+ <a href="#">Parent</a>
2048
+ <ul class="uk-nav-sub">
2049
+ <li><a href="#">Sub item</a></li>
2050
+ <li><a href="#">Sub item</a></li>
2051
+ </ul>
2052
+ </li>
2053
+ <li class="uk-nav-header">Header</li>
2054
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
2055
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2056
+ <li class="uk-nav-divider"></li>
2057
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
2058
+ </ul>
2059
+ </div>
2060
+ </li>
2061
+ <li>
2062
+ <a href="#">Content</a>
2063
+ <div class="uk-navbar-dropdown">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
2064
+ </li>
2065
+ </ul>
2066
+ </div>
2067
+
2068
+ <a class="uk-navbar-item uk-logo" href="#">Logo</a>
2069
+
2070
+ <div class="uk-navbar-center-right">
2071
+ <ul class="uk-navbar-nav">
2072
+ <li>
2073
+ <a href>Parent</a>
2074
+ <div class="uk-navbar-dropdown">
2075
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2076
+ <li class="uk-active"><a href="#">Active</a></li>
2077
+ <li class="uk-parent">
2078
+ <a href="#">Parent</a>
2079
+ <ul class="uk-nav-sub">
2080
+ <li><a href="#">Sub item</a></li>
2081
+ <li><a href="#">Sub item</a></li>
2082
+ </ul>
2083
+ </li>
2084
+ <li class="uk-nav-header">Header</li>
2085
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
2086
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2087
+ <li class="uk-nav-divider"></li>
2088
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
2089
+ </ul>
2090
+ </div>
2091
+ </li>
2092
+ <li>
2093
+ <a href="#">Content</a>
2094
+ <div class="uk-navbar-dropdown">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
2095
+ </li>
2096
+ </ul>
2097
+ <div class="uk-navbar-item">
2098
+ <div>Some <a href="#">Link</a></div>
2099
+ </div>
2100
+ </div>
2101
+
2102
+ </div>
2103
+ <div class="uk-navbar-right">
2104
+
2105
+ <ul class="uk-navbar-nav">
2106
+ <li>
2107
+ <a href="#">Right</a>
2108
+ <div class="uk-navbar-dropdown">
2109
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2110
+ <li class="uk-active"><a href="#">Active</a></li>
2111
+ <li class="uk-parent">
2112
+ <a href="#">Parent</a>
2113
+ <ul class="uk-nav-sub">
2114
+ <li><a href="#">Sub item</a></li>
2115
+ <li><a href="#">Sub item</a></li>
2116
+ </ul>
2117
+ </li>
2118
+ <li class="uk-nav-header">Header</li>
2119
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
2120
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2121
+ <li class="uk-nav-divider"></li>
2122
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
2123
+ </ul>
2124
+ </div>
2125
+ </li>
2126
+ </ul>
2127
+
2128
+ </div>
2129
+ </div>
2130
+ </div>
2131
+ </nav>
2132
+
2133
+ <div class="uk-container uk-margin-medium-top">
2134
+
2135
+ <h2>Stretch</h2>
2136
+
2137
+ </div>
2138
+
2139
+ <nav class="uk-navbar-container uk-margin">
2140
+ <div class="uk-container">
2141
+ <div class="uk-navbar-justify" uk-navbar>
2142
+ <div class="uk-navbar-left">
2143
+
2144
+ <a class="uk-navbar-item uk-logo" href="#">Logo</a>
2145
+
2146
+ <ul class="uk-navbar-nav">
2147
+ <li class="uk-active"><a href="#">Active</a></li>
2148
+ <li><a href="#">Parent</a></li>
2149
+ <li><a href="#">Item</a></li>
2150
+ <li><a href="#">Item</a></li>
2151
+ <li><a href="#">Item</a></li>
2152
+ </ul>
2153
+
2154
+ <div class="uk-navbar-item">
2155
+ <ul class="uk-iconnav">
2156
+ <li>
2157
+ <a href="#" uk-icon="icon: user"></a>
2158
+ </li>
2159
+ <li>
2160
+ <a href="#" uk-icon="icon: bag"></a>
2161
+ </li>
2162
+ <li>
2163
+ <a href="#" uk-icon="icon: heart"></a>
2164
+ </li>
2165
+ </ul>
2166
+ </div>
2167
+
2168
+ </div>
2169
+ </div>
2170
+ </div>
2171
+ </nav>
2172
+
2173
+ <div class="uk-container uk-margin-medium-top">
2174
+
2175
+ <h2>Layouts</h2>
2176
+
2177
+ </div>
2178
+
2179
+ <nav class="uk-navbar-container uk-margin">
2180
+ <div class="uk-container">
2181
+ <div uk-navbar>
2182
+ <div class="uk-navbar-left">
2183
+
2184
+ <ul class="uk-navbar-nav">
2185
+ <li class="uk-active"><a href="#">Active</a></li>
2186
+ <li>
2187
+ <a href="#">Parent</a>
2188
+ <div class="uk-navbar-dropdown">
2189
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2190
+ <li class="uk-active"><a href="#">Active</a></li>
2191
+ <li class="uk-parent">
2192
+ <a href="#">Parent</a>
2193
+ <ul class="uk-nav-sub">
2194
+ <li><a href="#">Sub item</a></li>
2195
+ <li><a href="#">Sub item</a></li>
2196
+ </ul>
2197
+ </li>
2198
+ <li class="uk-nav-header">Header</li>
2199
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
2200
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2201
+ <li class="uk-nav-divider"></li>
2202
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
2203
+ </ul>
2204
+ </div>
2205
+ </li>
2206
+ <li><a href="#">Item</a></li>
2207
+ <li><a href="#">Item</a></li>
2208
+ </ul>
2209
+
2210
+ </div>
2211
+ </div>
2212
+ </div>
2213
+ </nav>
2214
+
2215
+ <nav class="uk-navbar-container uk-margin">
2216
+ <div class="uk-container">
2217
+ <div uk-navbar>
2218
+ <div class="uk-navbar-left">
2219
+
2220
+ <a class="uk-navbar-item uk-logo" href="#">Logo</a>
2221
+
2222
+ <ul class="uk-navbar-nav">
2223
+ <li class="uk-active"><a href="#">Active</a></li>
2224
+ <li>
2225
+ <a href="#">Parent</a>
2226
+ <div class="uk-navbar-dropdown">
2227
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2228
+ <li class="uk-active"><a href="#">Active</a></li>
2229
+ <li class="uk-parent">
2230
+ <a href="#">Parent</a>
2231
+ <ul class="uk-nav-sub">
2232
+ <li><a href="#">Sub item</a></li>
2233
+ <li><a href="#">Sub item</a></li>
2234
+ </ul>
2235
+ </li>
2236
+ <li class="uk-nav-header">Header</li>
2237
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
2238
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2239
+ <li class="uk-nav-divider"></li>
2240
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
2241
+ </ul>
2242
+ </div>
2243
+ </li>
2244
+ <li><a href="#">Item</a></li>
2245
+ <li><a href="#">Item</a></li>
2246
+ </ul>
2247
+
2248
+ </div>
2249
+ <div class="uk-navbar-right">
2250
+
2251
+ <ul class="uk-navbar-nav">
2252
+ <li class="uk-active"><a href="#">Active</a></li>
2253
+ <li>
2254
+ <a href="#">Parent</a>
2255
+ <div class="uk-navbar-dropdown">
2256
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2257
+ <li class="uk-active"><a href="#">Active</a></li>
2258
+ <li class="uk-parent">
2259
+ <a href="#">Parent</a>
2260
+ <ul class="uk-nav-sub">
2261
+ <li><a href="#">Sub item</a></li>
2262
+ <li><a href="#">Sub item</a></li>
2263
+ </ul>
2264
+ </li>
2265
+ <li class="uk-nav-header">Header</li>
2266
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
2267
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2268
+ <li class="uk-nav-divider"></li>
2269
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
2270
+ </ul>
2271
+ </div>
2272
+ </li>
2273
+ <li><a href="#">Item</a></li>
2274
+ </ul>
2275
+
2276
+ <div class="uk-navbar-item">
2277
+ <ul class="uk-iconnav">
2278
+ <li>
2279
+ <a href="#" uk-icon="icon: user"></a>
2280
+ </li>
2281
+ <li>
2282
+ <a href="#" uk-icon="icon: bag"></a>
2283
+ </li>
2284
+ <li>
2285
+ <a href="#" uk-icon="icon: heart"></a>
2286
+ </li>
2287
+ </ul>
2288
+ </div>
2289
+
2290
+ <a class="uk-navbar-toggle" href uk-navbar-toggle-icon></a>
2291
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; boundary: !.uk-navbar; stretch: x; flip: false">
2292
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2293
+ <li class="uk-active"><a href="#">Active</a></li>
2294
+ <li class="uk-parent">
2295
+ <a href="#">Parent</a>
2296
+ <ul class="uk-nav-sub">
2297
+ <li><a href="#">Sub item</a></li>
2298
+ <li><a href="#">Sub item</a></li>
2299
+ </ul>
2300
+ </li>
2301
+ <li class="uk-nav-header">Header</li>
2302
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
2303
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2304
+ <li class="uk-nav-divider"></li>
2305
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
2306
+ </ul>
2307
+ </div>
2308
+
2309
+ </div>
2310
+ </div>
2311
+ </div>
2312
+ </nav>
2313
+
2314
+ <nav class="uk-navbar-container uk-margin">
2315
+ <div class="uk-container">
2316
+ <div uk-navbar>
2317
+ <div class="uk-navbar-left">
2318
+
2319
+ <a class="uk-navbar-item uk-logo" href="#">Logo</a>
2320
+
2321
+ </div>
2322
+ <div class="uk-navbar-center">
2323
+
2324
+ <ul class="uk-navbar-nav">
2325
+ <li class="uk-active"><a href="#">Active</a></li>
2326
+ <li>
2327
+ <a href="#">Parent</a>
2328
+ <div class="uk-navbar-dropdown">
2329
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2330
+ <li class="uk-active"><a href="#">Active</a></li>
2331
+ <li class="uk-parent">
2332
+ <a href="#">Parent</a>
2333
+ <ul class="uk-nav-sub">
2334
+ <li><a href="#">Sub item</a></li>
2335
+ <li><a href="#">Sub item</a></li>
2336
+ </ul>
2337
+ </li>
2338
+ <li class="uk-nav-header">Header</li>
2339
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
2340
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2341
+ <li class="uk-nav-divider"></li>
2342
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
2343
+ </ul>
2344
+ </div>
2345
+ </li>
2346
+ <li><a href="#">Item</a></li>
2347
+ <li><a href="#">Item</a></li>
2348
+ </ul>
2349
+
2350
+ </div>
2351
+ <div class="uk-navbar-right">
2352
+
2353
+ <a class="uk-navbar-toggle" href uk-navbar-toggle-icon></a>
2354
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; boundary: !.uk-navbar; stretch: x; flip: false">
2355
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2356
+ <li class="uk-active"><a href="#">Active</a></li>
2357
+ <li class="uk-parent">
2358
+ <a href="#">Parent</a>
2359
+ <ul class="uk-nav-sub">
2360
+ <li><a href="#">Sub item</a></li>
2361
+ <li><a href="#">Sub item</a></li>
2362
+ </ul>
2363
+ </li>
2364
+ <li class="uk-nav-header">Header</li>
2365
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
2366
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2367
+ <li class="uk-nav-divider"></li>
2368
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
2369
+ </ul>
2370
+ </div>
2371
+
2372
+ </div>
2373
+ </div>
2374
+ </div>
2375
+ </nav>
2376
+
2377
+ <!-- Expand -->
2378
+
2379
+ <nav class="uk-navbar-container uk-margin">
2380
+ <div class="uk-container uk-container-expand">
2381
+ <div uk-navbar>
2382
+ <div class="uk-navbar-left">
2383
+
2384
+ <a class="uk-navbar-item uk-logo" href="#">Logo</a>
2385
+
2386
+ <ul class="uk-navbar-nav">
2387
+ <li class="uk-active"><a href="#">Active</a></li>
2388
+ <li>
2389
+ <a href="#">Parent</a>
2390
+ <div class="uk-navbar-dropdown">
2391
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2392
+ <li class="uk-active"><a href="#">Active</a></li>
2393
+ <li class="uk-parent">
2394
+ <a href="#">Parent</a>
2395
+ <ul class="uk-nav-sub">
2396
+ <li><a href="#">Sub item</a></li>
2397
+ <li><a href="#">Sub item</a></li>
2398
+ </ul>
2399
+ </li>
2400
+ <li class="uk-nav-header">Header</li>
2401
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
2402
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2403
+ <li class="uk-nav-divider"></li>
2404
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
2405
+ </ul>
2406
+ </div>
2407
+ </li>
2408
+ <li><a href="#">Item</a></li>
2409
+ <li><a href="#">Item</a></li>
2410
+ </ul>
2411
+
2412
+ </div>
2413
+ </div>
2414
+ </div>
2415
+ </nav>
2416
+
2417
+ <nav class="uk-navbar-container uk-margin">
2418
+ <div class="uk-container uk-container-expand">
2419
+ <div uk-navbar>
2420
+ <div class="uk-navbar-left">
2421
+
2422
+ <a class="uk-navbar-item uk-logo" href="#">Logo</a>
2423
+
2424
+ <ul class="uk-navbar-nav">
2425
+ <li class="uk-active"><a href="#">Active</a></li>
2426
+ <li>
2427
+ <a href="#">Parent</a>
2428
+ <div class="uk-navbar-dropdown">
2429
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2430
+ <li class="uk-active"><a href="#">Active</a></li>
2431
+ <li class="uk-parent">
2432
+ <a href="#">Parent</a>
2433
+ <ul class="uk-nav-sub">
2434
+ <li><a href="#">Sub item</a></li>
2435
+ <li><a href="#">Sub item</a></li>
2436
+ </ul>
2437
+ </li>
2438
+ <li class="uk-nav-header">Header</li>
2439
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
2440
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2441
+ <li class="uk-nav-divider"></li>
2442
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
2443
+ </ul>
2444
+ </div>
2445
+ </li>
2446
+ <li><a href="#">Item</a></li>
2447
+ <li><a href="#">Item</a></li>
2448
+ </ul>
2449
+
2450
+ </div>
2451
+ <div class="uk-navbar-right">
2452
+
2453
+ <ul class="uk-navbar-nav">
2454
+ <li class="uk-active"><a href="#">Active</a></li>
2455
+ <li>
2456
+ <a href="#">Parent</a>
2457
+ <div class="uk-navbar-dropdown">
2458
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2459
+ <li class="uk-active"><a href="#">Active</a></li>
2460
+ <li class="uk-parent">
2461
+ <a href="#">Parent</a>
2462
+ <ul class="uk-nav-sub">
2463
+ <li><a href="#">Sub item</a></li>
2464
+ <li><a href="#">Sub item</a></li>
2465
+ </ul>
2466
+ </li>
2467
+ <li class="uk-nav-header">Header</li>
2468
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
2469
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2470
+ <li class="uk-nav-divider"></li>
2471
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
2472
+ </ul>
2473
+ </div>
2474
+ </li>
2475
+ <li><a href="#">Item</a></li>
2476
+ </ul>
2477
+
2478
+ <a class="uk-navbar-toggle" href uk-navbar-toggle-icon></a>
2479
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; boundary: !.uk-navbar; stretch: x; flip: false">
2480
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2481
+ <li class="uk-active"><a href="#">Active</a></li>
2482
+ <li class="uk-parent">
2483
+ <a href="#">Parent</a>
2484
+ <ul class="uk-nav-sub">
2485
+ <li><a href="#">Sub item</a></li>
2486
+ <li><a href="#">Sub item</a></li>
2487
+ </ul>
2488
+ </li>
2489
+ <li class="uk-nav-header">Header</li>
2490
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
2491
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2492
+ <li class="uk-nav-divider"></li>
2493
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
2494
+ </ul>
2495
+ </div>
2496
+
2497
+ </div>
2498
+ </div>
2499
+ </div>
2500
+ </nav>
2501
+
2502
+ <nav class="uk-navbar-container uk-margin">
2503
+ <div class="uk-container uk-container-expand">
2504
+ <div uk-navbar>
2505
+ <div class="uk-navbar-left">
2506
+
2507
+ <a class="uk-navbar-item uk-logo" href="#">Logo</a>
2508
+
2509
+ </div>
2510
+ <div class="uk-navbar-center">
2511
+
2512
+ <ul class="uk-navbar-nav ">
2513
+ <li class="uk-active"><a href="#">Active</a></li>
2514
+ <li>
2515
+ <a href="#">Parent</a>
2516
+ <div class="uk-navbar-dropdown">
2517
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2518
+ <li class="uk-active"><a href="#">Active</a></li>
2519
+ <li class="uk-parent">
2520
+ <a href="#">Parent</a>
2521
+ <ul class="uk-nav-sub">
2522
+ <li><a href="#">Sub item</a></li>
2523
+ <li><a href="#">Sub item</a></li>
2524
+ </ul>
2525
+ </li>
2526
+ <li class="uk-nav-header">Header</li>
2527
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
2528
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2529
+ <li class="uk-nav-divider"></li>
2530
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
2531
+ </ul>
2532
+ </div>
2533
+ </li>
2534
+ <li><a href="#">Item</a></li>
2535
+ <li><a href="#">Item</a></li>
2536
+ </ul>
2537
+
2538
+ </div>
2539
+ <div class="uk-navbar-right">
2540
+
2541
+ <a class="uk-navbar-toggle" href uk-navbar-toggle-icon></a>
2542
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; boundary: !.uk-navbar; stretch: x; flip: false">
2543
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2544
+ <li class="uk-active"><a href="#">Active</a></li>
2545
+ <li class="uk-parent">
2546
+ <a href="#">Parent</a>
2547
+ <ul class="uk-nav-sub">
2548
+ <li><a href="#">Sub item</a></li>
2549
+ <li><a href="#">Sub item</a></li>
2550
+ </ul>
2551
+ </li>
2552
+ <li class="uk-nav-header">Header</li>
2553
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
2554
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2555
+ <li class="uk-nav-divider"></li>
2556
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
2557
+ </ul>
2558
+ </div>
2559
+
2560
+ </div>
2561
+ </div>
2562
+ </div>
2563
+ </nav>
2564
+
2565
+ <div class="uk-container uk-margin-medium-top">
2566
+
2567
+ <h2>JavaScript Options</h2>
2568
+
2569
+ <div class="uk-overflow-auto">
2570
+ <table class="uk-table uk-table-striped">
2571
+ <thead>
2572
+ <tr>
2573
+ <th>Option</th>
2574
+ <th>Value</th>
2575
+ <th>Default</th>
2576
+ <th>Description</th>
2577
+ </tr>
2578
+ </thead>
2579
+ <tbody>
2580
+ <tr>
2581
+ <td><code>align</code></td>
2582
+ <td>String</td>
2583
+ <td>left</td>
2584
+ <td>Drop alignment (left, right, center).</td>
2585
+ </tr>
2586
+ <tr>
2587
+ <td><code>boundary</code></td>
2588
+ <td>Boolean, CSS selector</td>
2589
+ <td>true</td>
2590
+ <td>Referenced element to keep Drop's visibility. By default, it's the navbar component's element.</td>
2591
+ </tr>
2592
+ <tr>
2593
+ <td><code>dropbar</code></td>
2594
+ <td>Boolean, CSS selector</td>
2595
+ <td>false</td>
2596
+ <td>The dropbar selector. If true the dropbar will be inserted automatically.</td>
2597
+ </tr>
2598
+ <tr>
2599
+ <td><code>dropbar-anchor</code></td>
2600
+ <td>Boolean, CSS selector</td>
2601
+ <td>false</td>
2602
+ <td>The dropbar anchor selector. If set, dropbar will be inserted after the anchor element.</td>
2603
+ </tr>
2604
+ <tr>
2605
+ <td><code>dropbar-transparent-mode</code></td>
2606
+ <td>Boolean, String</td>
2607
+ <td>false</td>
2608
+ <td>The dropbar transparent mode (behind, remove).</td>
2609
+ </tr>
2610
+ <tr>
2611
+ <td><code>duration</code></td>
2612
+ <td>Number</td>
2613
+ <td>200</td>
2614
+ <td>The dropbar transition duration.</td>
2615
+ </tr>
2616
+ <tr>
2617
+ <td><code>container</code></td>
2618
+ <td>Boolean</td>
2619
+ <td>false</td>
2620
+ <td>Define a target container via a selector to specify where the drops should be appended in the DOM.</td>
2621
+ </tr>
2622
+ <tr>
2623
+ <td><code>stretch</code></td>
2624
+ <td>Boolean, String</td>
2625
+ <td>true</td>
2626
+ <td>Stretch drop on both (true) or given axis (x,y).</td>
2627
+ </tr>
2628
+ <tr>
2629
+ <td><code>mode</code></td>
2630
+ <td>String</td>
2631
+ <td>click,hover</td>
2632
+ <td>Comma-separated list of drop trigger behavior modes (hover, click).</td>
2633
+ </tr>
2634
+ <tr>
2635
+ <td><code>delay-show</code></td>
2636
+ <td>Number</td>
2637
+ <td>0</td>
2638
+ <td>Delay time in hover mode before a drop is shown in ms.</td>
2639
+ </tr>
2640
+ <tr>
2641
+ <td><code>delay-hide</code></td>
2642
+ <td>Number</td>
2643
+ <td>800</td>
2644
+ <td>Delay time in hover mode before a drop is hidden in ms.</td>
2645
+ </tr>
2646
+ <tr>
2647
+ <td><code>target</code></td>
2648
+ <td>Boolean, CSS selector</td>
2649
+ <td>false</td>
2650
+ <td>The element the drop is positioned to (`true` for window).</td>
2651
+ </tr>
2652
+ <tr>
2653
+ <td><code>target-x</code></td>
2654
+ <td>Boolean, CSS selector</td>
2655
+ <td>false</td>
2656
+ <td>The element's X axis the drop is positioned to (`true` for window).</td>
2657
+ </tr>
2658
+ <tr>
2659
+ <td><code>target-y</code></td>
2660
+ <td>Boolean, CSS selector</td>
2661
+ <td>false</td>
2662
+ <td>The element's Y axis the drop is positioned to (`true` for window).</td>
2663
+ </tr>
2664
+ <tr>
2665
+ <td><code>offset</code></td>
2666
+ <td>Number</td>
2667
+ <td>0</td>
2668
+ <td>The drop offset.</td>
2669
+ </tr>
2670
+ <tr>
2671
+ <td><code>animation</code></td>
2672
+ <td>String</td>
2673
+ <td>uk-animation-fade</td>
2674
+ <td>Space-separated names of animations. Comma-separated for animation out.</td>
2675
+ </tr>
2676
+ <tr>
2677
+ <td><code>animate-out</code></td>
2678
+ <td>Boolean</td>
2679
+ <td>false</td>
2680
+ <td>Use animation when closing the drop.</td>
2681
+ </tr>
2682
+ <tr>
2683
+ <td><code>bg-scroll</code></td>
2684
+ <td>Boolean</td>
2685
+ <td>true</td>
2686
+ <td>Allow background scrolling while drop is opened.</td>
2687
+ </tr>
2688
+ <tr>
2689
+ <td><code>close-on-scroll</code></td>
2690
+ <td>Boolean</td>
2691
+ <td>false</td>
2692
+ <td>Close the drop on scrolling a parent scroll container.</td>
2693
+ </tr>
2694
+ </tbody>
2695
+ </table>
2696
+ </div>
2697
+
2698
+ <h2>Mouse Tracker</h2>
2699
+
2700
+ <div id="js-mousetracker" class="uk-position-relative">
2701
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
2702
+ <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-center" style="height: 150px; width: 150px;">
2703
+ <div id="js-mousetarget" class="uk-position-center"></div>
2704
+ </div>
2705
+ </div>
2706
+
2707
+ </div>
2708
+
2709
+ <script>
2710
+
2711
+ const {$, $$, addClass, on, removeClass, MouseTracker } = UIkit.util;
2712
+ const tracker = new MouseTracker();
2713
+ const el = $('#js-mousetracker');
2714
+ const target = $('#js-mousetarget');
2715
+ let interval;
2716
+
2717
+ on(el, 'mouseenter', () => {
2718
+ tracker.init();
2719
+ interval = setInterval(() => target.textContent = tracker.movesTo(target.parentNode) ? 'Moves to' : 'Does not move to');
2720
+ });
2721
+
2722
+ on(el, 'mouseleave', () => {
2723
+ tracker.cancel();
2724
+ clearInterval(interval);
2725
+ });
2726
+
2727
+ on('#js-dropdown-size-switcher', 'change', (e) => {
2728
+ const options = $$('option', e.target).map(({value}) => value);
2729
+ for (const el of $$('.uk-navbar-dropdown:not(.uk-navbar-dropdown-dropbar)')) {
2730
+ removeClass(el, options);
2731
+ addClass(el, e.target.value);
2732
+ }
2733
+ });
2734
+
2735
+ on('#js-dropbar-size-switcher', 'change', (e) => {
2736
+ const options = $$('option', e.target).map(({value}) => value);
2737
+ for (const el of $$('.uk-navbar-dropdown-dropbar')) {
2738
+ removeClass(el, options);
2739
+ addClass(el, e.target.value);
2740
+ }
2741
+ });
2742
+
2743
+ </script>
2744
+
2745
+ </body>
2746
+ </html>