uikit 3.14.2-dev.e270e98f7 → 3.14.3-dev.5325d42a0

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 (96) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/build/util.js +8 -2
  3. package/dist/css/uikit-core-rtl.css +93 -21
  4. package/dist/css/uikit-core-rtl.min.css +1 -1
  5. package/dist/css/uikit-core.css +93 -21
  6. package/dist/css/uikit-core.min.css +1 -1
  7. package/dist/css/uikit-rtl.css +99 -33
  8. package/dist/css/uikit-rtl.min.css +1 -1
  9. package/dist/css/uikit.css +99 -33
  10. package/dist/css/uikit.min.css +1 -1
  11. package/dist/js/components/countdown.js +1 -1
  12. package/dist/js/components/countdown.min.js +1 -1
  13. package/dist/js/components/filter.js +1 -1
  14. package/dist/js/components/filter.min.js +1 -1
  15. package/dist/js/components/lightbox-panel.js +106 -17
  16. package/dist/js/components/lightbox-panel.min.js +1 -1
  17. package/dist/js/components/lightbox.js +106 -17
  18. package/dist/js/components/lightbox.min.js +1 -1
  19. package/dist/js/components/notification.js +1 -1
  20. package/dist/js/components/notification.min.js +1 -1
  21. package/dist/js/components/parallax.js +71 -36
  22. package/dist/js/components/parallax.min.js +1 -1
  23. package/dist/js/components/slider-parallax.js +55 -35
  24. package/dist/js/components/slider-parallax.min.js +1 -1
  25. package/dist/js/components/slider.js +1 -1
  26. package/dist/js/components/slider.min.js +1 -1
  27. package/dist/js/components/slideshow-parallax.js +55 -35
  28. package/dist/js/components/slideshow-parallax.min.js +1 -1
  29. package/dist/js/components/slideshow.js +1 -1
  30. package/dist/js/components/slideshow.min.js +1 -1
  31. package/dist/js/components/sortable.js +1 -1
  32. package/dist/js/components/sortable.min.js +1 -1
  33. package/dist/js/components/tooltip.js +142 -36
  34. package/dist/js/components/tooltip.min.js +1 -1
  35. package/dist/js/components/upload.js +1 -1
  36. package/dist/js/components/upload.min.js +1 -1
  37. package/dist/js/uikit-core.js +276 -129
  38. package/dist/js/uikit-core.min.js +1 -1
  39. package/dist/js/uikit-icons.js +1 -1
  40. package/dist/js/uikit-icons.min.js +1 -1
  41. package/dist/js/uikit.js +346 -164
  42. package/dist/js/uikit.min.js +1 -1
  43. package/package.json +11 -11
  44. package/src/js/components/parallax.js +16 -1
  45. package/src/js/core/accordion.js +3 -3
  46. package/src/js/core/alert.js +1 -1
  47. package/src/js/core/drop.js +47 -18
  48. package/src/js/core/height-viewport.js +15 -11
  49. package/src/js/core/navbar.js +19 -18
  50. package/src/js/core/scrollspy.js +4 -0
  51. package/src/js/core/toggle.js +9 -8
  52. package/src/js/mixin/parallax.js +54 -34
  53. package/src/js/mixin/position.js +36 -20
  54. package/src/js/mixin/togglable.js +110 -19
  55. package/src/js/util/animation.js +1 -0
  56. package/src/js/util/dom.js +4 -3
  57. package/src/js/util/position.js +24 -22
  58. package/src/js/util/viewport.js +7 -8
  59. package/src/less/components/drop.less +19 -4
  60. package/src/less/components/dropdown.less +21 -4
  61. package/src/less/components/margin.less +13 -14
  62. package/src/less/components/modal.less +19 -4
  63. package/src/less/components/nav.less +1 -1
  64. package/src/less/components/navbar.less +60 -19
  65. package/src/less/components/offcanvas.less +21 -21
  66. package/src/less/components/position.less +1 -1
  67. package/src/less/components/sticky.less +7 -0
  68. package/src/less/components/tooltip.less +1 -0
  69. package/src/less/components/utility.less +1 -2
  70. package/src/less/theme/dropdown.less +11 -0
  71. package/src/less/theme/navbar.less +10 -10
  72. package/src/scss/components/drop.scss +19 -4
  73. package/src/scss/components/dropdown.scss +21 -4
  74. package/src/scss/components/margin.scss +13 -14
  75. package/src/scss/components/modal.scss +19 -4
  76. package/src/scss/components/nav.scss +1 -1
  77. package/src/scss/components/navbar.scss +49 -8
  78. package/src/scss/components/offcanvas.scss +21 -21
  79. package/src/scss/components/position.scss +1 -1
  80. package/src/scss/components/sticky.scss +7 -0
  81. package/src/scss/components/tooltip.scss +1 -0
  82. package/src/scss/components/utility.scss +1 -2
  83. package/src/scss/mixins-theme.scss +8 -10
  84. package/src/scss/mixins.scss +2 -0
  85. package/src/scss/theme/dropdown.scss +8 -0
  86. package/src/scss/theme/navbar.scss +7 -0
  87. package/src/scss/variables-theme.scss +26 -11
  88. package/src/scss/variables.scss +24 -11
  89. package/tests/drop.html +165 -4
  90. package/tests/dropdown.html +234 -13
  91. package/tests/height-viewport.html +62 -0
  92. package/tests/navbar.html +333 -64
  93. package/tests/offcanvas.html +8 -8
  94. package/tests/sticky-navbar.html +132 -0
  95. package/tests/sticky-parallax.html +2 -1
  96. package/tests/sticky.html +5 -4
package/tests/navbar.html CHANGED
@@ -1400,39 +1400,118 @@
1400
1400
 
1401
1401
  <nav class="uk-navbar uk-navbar-container uk-margin">
1402
1402
  <div class="uk-navbar-left">
1403
- <div>
1404
- <a class="uk-navbar-item uk-logo" href="#">Logo</a>
1405
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
1406
- </div>
1403
+ <a class="uk-navbar-item uk-logo" href="#">Logo</a>
1404
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
1407
1405
  </div>
1408
1406
  <div class="uk-navbar-right">
1409
- <div>
1410
- <a class="uk-navbar-toggle" href="#" uk-navbar-toggle-icon></a>
1411
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
1412
- </div>
1407
+ <a class="uk-navbar-toggle" href="#" uk-navbar-toggle-icon></a>
1408
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
1413
1409
  </div>
1414
1410
  </nav>
1415
1411
 
1416
1412
  <nav class="uk-navbar uk-navbar-container uk-margin">
1417
1413
  <div class="uk-navbar-left">
1418
- <div>
1419
- <a class="uk-navbar-toggle" href="#">Menu</a>
1420
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
1421
- </div>
1414
+ <a class="uk-navbar-toggle" href="#">Menu</a>
1415
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
1422
1416
  </div>
1423
1417
  <div class="uk-navbar-right">
1424
- <div>
1425
- <a class="uk-navbar-toggle" href="#">
1426
- <span class="uk-margin-small-right">Menu</span> <span uk-navbar-toggle-icon></span>
1427
- </a>
1428
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
1429
- </div>
1418
+ <a class="uk-navbar-toggle" href="#">
1419
+ <span class="uk-margin-small-right">Menu</span> <span uk-navbar-toggle-icon></span>
1420
+ </a>
1421
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
1430
1422
  </div>
1431
1423
  </nav>
1432
1424
 
1433
1425
  </div>
1434
1426
  </div>
1435
1427
 
1428
+ <h2>Dropdown Stretch</h2>
1429
+
1430
+ <nav class="uk-navbar uk-navbar-container uk-margin">
1431
+ <div class="uk-navbar-left">
1432
+ <a class="uk-navbar-toggle" href="#">
1433
+ <span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Fade</span>
1434
+ </a>
1435
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true">
1436
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1437
+ <li class="uk-active"><a href="#">Active</a></li>
1438
+ <li class="uk-parent">
1439
+ <a href="#">Parent</a>
1440
+ <ul class="uk-nav-sub">
1441
+ <li><a href="#">Sub item</a></li>
1442
+ <li><a href="#">Sub item</a></li>
1443
+ </ul>
1444
+ </li>
1445
+ <li class="uk-nav-header">Header</li>
1446
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1447
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1448
+ <li class="uk-nav-divider"></li>
1449
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1450
+ </ul>
1451
+ </div>
1452
+ <a class="uk-navbar-toggle" href="#">
1453
+ <span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Slide</span>
1454
+ </a>
1455
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true; animation: slide">
1456
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1457
+ <li class="uk-active"><a href="#">Active</a></li>
1458
+ <li class="uk-parent">
1459
+ <a href="#">Parent</a>
1460
+ <ul class="uk-nav-sub">
1461
+ <li><a href="#">Sub item</a></li>
1462
+ <li><a href="#">Sub item</a></li>
1463
+ </ul>
1464
+ </li>
1465
+ <li class="uk-nav-header">Header</li>
1466
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1467
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1468
+ <li class="uk-nav-divider"></li>
1469
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1470
+ </ul>
1471
+ </div>
1472
+ <a class="uk-navbar-toggle" href="#">
1473
+ <span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Slide Left</span>
1474
+ </a>
1475
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true; animation: slide-left">
1476
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1477
+ <li class="uk-active"><a href="#">Active</a></li>
1478
+ <li class="uk-parent">
1479
+ <a href="#">Parent</a>
1480
+ <ul class="uk-nav-sub">
1481
+ <li><a href="#">Sub item</a></li>
1482
+ <li><a href="#">Sub item</a></li>
1483
+ </ul>
1484
+ </li>
1485
+ <li class="uk-nav-header">Header</li>
1486
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1487
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1488
+ <li class="uk-nav-divider"></li>
1489
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1490
+ </ul>
1491
+ </div>
1492
+ <a class="uk-navbar-toggle" href="#">
1493
+ <span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Slide Right</span>
1494
+ </a>
1495
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true; animation: slide-right">
1496
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1497
+ <li class="uk-active"><a href="#">Active</a></li>
1498
+ <li class="uk-parent">
1499
+ <a href="#">Parent</a>
1500
+ <ul class="uk-nav-sub">
1501
+ <li><a href="#">Sub item</a></li>
1502
+ <li><a href="#">Sub item</a></li>
1503
+ </ul>
1504
+ </li>
1505
+ <li class="uk-nav-header">Header</li>
1506
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1507
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1508
+ <li class="uk-nav-divider"></li>
1509
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1510
+ </ul>
1511
+ </div>
1512
+ </div>
1513
+ </nav>
1514
+
1436
1515
  <h2>Center</h2>
1437
1516
 
1438
1517
  <nav class="uk-navbar-container uk-margin" uk-navbar>
@@ -1764,14 +1843,31 @@
1764
1843
 
1765
1844
  <nav class="uk-navbar-container uk-margin">
1766
1845
  <div class="uk-container">
1767
- <div class="uk-navbar">
1846
+ <div uk-navbar>
1768
1847
  <div class="uk-navbar-left">
1769
1848
 
1770
- <a class="uk-navbar-item uk-logo" href="#">Logo</a>
1771
-
1772
1849
  <ul class="uk-navbar-nav">
1773
1850
  <li class="uk-active"><a href="#">Active</a></li>
1774
- <li><a href="#">Parent</a></li>
1851
+ <li>
1852
+ <a href="#">Parent</a>
1853
+ <div class="uk-navbar-dropdown">
1854
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1855
+ <li class="uk-active"><a href="#">Active</a></li>
1856
+ <li class="uk-parent">
1857
+ <a href="#">Parent</a>
1858
+ <ul class="uk-nav-sub">
1859
+ <li><a href="#">Sub item</a></li>
1860
+ <li><a href="#">Sub item</a></li>
1861
+ </ul>
1862
+ </li>
1863
+ <li class="uk-nav-header">Header</li>
1864
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1865
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1866
+ <li class="uk-nav-divider"></li>
1867
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1868
+ </ul>
1869
+ </div>
1870
+ </li>
1775
1871
  <li><a href="#">Item</a></li>
1776
1872
  <li><a href="#">Item</a></li>
1777
1873
  </ul>
@@ -1783,14 +1879,33 @@
1783
1879
 
1784
1880
  <nav class="uk-navbar-container uk-margin">
1785
1881
  <div class="uk-container">
1786
- <div class="uk-navbar">
1882
+ <div uk-navbar>
1787
1883
  <div class="uk-navbar-left">
1788
1884
 
1789
1885
  <a class="uk-navbar-item uk-logo" href="#">Logo</a>
1790
1886
 
1791
1887
  <ul class="uk-navbar-nav">
1792
1888
  <li class="uk-active"><a href="#">Active</a></li>
1793
- <li><a href="#">Parent</a></li>
1889
+ <li>
1890
+ <a href="#">Parent</a>
1891
+ <div class="uk-navbar-dropdown">
1892
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1893
+ <li class="uk-active"><a href="#">Active</a></li>
1894
+ <li class="uk-parent">
1895
+ <a href="#">Parent</a>
1896
+ <ul class="uk-nav-sub">
1897
+ <li><a href="#">Sub item</a></li>
1898
+ <li><a href="#">Sub item</a></li>
1899
+ </ul>
1900
+ </li>
1901
+ <li class="uk-nav-header">Header</li>
1902
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1903
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1904
+ <li class="uk-nav-divider"></li>
1905
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1906
+ </ul>
1907
+ </div>
1908
+ </li>
1794
1909
  <li><a href="#">Item</a></li>
1795
1910
  <li><a href="#">Item</a></li>
1796
1911
  </ul>
@@ -1800,7 +1915,26 @@
1800
1915
 
1801
1916
  <ul class="uk-navbar-nav">
1802
1917
  <li class="uk-active"><a href="#">Active</a></li>
1803
- <li><a href="#">Parent</a></li>
1918
+ <li>
1919
+ <a href="#">Parent</a>
1920
+ <div class="uk-navbar-dropdown">
1921
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1922
+ <li class="uk-active"><a href="#">Active</a></li>
1923
+ <li class="uk-parent">
1924
+ <a href="#">Parent</a>
1925
+ <ul class="uk-nav-sub">
1926
+ <li><a href="#">Sub item</a></li>
1927
+ <li><a href="#">Sub item</a></li>
1928
+ </ul>
1929
+ </li>
1930
+ <li class="uk-nav-header">Header</li>
1931
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1932
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1933
+ <li class="uk-nav-divider"></li>
1934
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1935
+ </ul>
1936
+ </div>
1937
+ </li>
1804
1938
  <li><a href="#">Item</a></li>
1805
1939
  </ul>
1806
1940
 
@@ -1818,6 +1952,25 @@
1818
1952
  </ul>
1819
1953
  </div>
1820
1954
 
1955
+ <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
1956
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true">
1957
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1958
+ <li class="uk-active"><a href="#">Active</a></li>
1959
+ <li class="uk-parent">
1960
+ <a href="#">Parent</a>
1961
+ <ul class="uk-nav-sub">
1962
+ <li><a href="#">Sub item</a></li>
1963
+ <li><a href="#">Sub item</a></li>
1964
+ </ul>
1965
+ </li>
1966
+ <li class="uk-nav-header">Header</li>
1967
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1968
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1969
+ <li class="uk-nav-divider"></li>
1970
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1971
+ </ul>
1972
+ </div>
1973
+
1821
1974
  </div>
1822
1975
  </div>
1823
1976
  </div>
@@ -1825,7 +1978,7 @@
1825
1978
 
1826
1979
  <nav class="uk-navbar-container uk-margin">
1827
1980
  <div class="uk-container">
1828
- <div class="uk-navbar">
1981
+ <div uk-navbar>
1829
1982
  <div class="uk-navbar-left">
1830
1983
 
1831
1984
  <a class="uk-navbar-item uk-logo" href="#">Logo</a>
@@ -1835,7 +1988,26 @@
1835
1988
 
1836
1989
  <ul class="uk-navbar-nav">
1837
1990
  <li class="uk-active"><a href="#">Active</a></li>
1838
- <li><a href="#">Parent</a></li>
1991
+ <li>
1992
+ <a href="#">Parent</a>
1993
+ <div class="uk-navbar-dropdown">
1994
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1995
+ <li class="uk-active"><a href="#">Active</a></li>
1996
+ <li class="uk-parent">
1997
+ <a href="#">Parent</a>
1998
+ <ul class="uk-nav-sub">
1999
+ <li><a href="#">Sub item</a></li>
2000
+ <li><a href="#">Sub item</a></li>
2001
+ </ul>
2002
+ </li>
2003
+ <li class="uk-nav-header">Header</li>
2004
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2005
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2006
+ <li class="uk-nav-divider"></li>
2007
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2008
+ </ul>
2009
+ </div>
2010
+ </li>
1839
2011
  <li><a href="#">Item</a></li>
1840
2012
  <li><a href="#">Item</a></li>
1841
2013
  </ul>
@@ -1843,17 +2015,22 @@
1843
2015
  </div>
1844
2016
  <div class="uk-navbar-right">
1845
2017
 
1846
- <div class="uk-navbar-item">
1847
- <ul class="uk-grid-small" uk-grid>
1848
- <li>
1849
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
1850
- </li>
1851
- <li>
1852
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
1853
- </li>
1854
- <li>
1855
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
2018
+ <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
2019
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true">
2020
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2021
+ <li class="uk-active"><a href="#">Active</a></li>
2022
+ <li class="uk-parent">
2023
+ <a href="#">Parent</a>
2024
+ <ul class="uk-nav-sub">
2025
+ <li><a href="#">Sub item</a></li>
2026
+ <li><a href="#">Sub item</a></li>
2027
+ </ul>
1856
2028
  </li>
2029
+ <li class="uk-nav-header">Header</li>
2030
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2031
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2032
+ <li class="uk-nav-divider"></li>
2033
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1857
2034
  </ul>
1858
2035
  </div>
1859
2036
 
@@ -1866,14 +2043,33 @@
1866
2043
 
1867
2044
  <nav class="uk-navbar-container uk-margin">
1868
2045
  <div class="uk-container uk-container-expand">
1869
- <div class="uk-navbar">
2046
+ <div uk-navbar>
1870
2047
  <div class="uk-navbar-left">
1871
2048
 
1872
2049
  <a class="uk-navbar-item uk-logo" href="#">Logo</a>
1873
2050
 
1874
2051
  <ul class="uk-navbar-nav">
1875
2052
  <li class="uk-active"><a href="#">Active</a></li>
1876
- <li><a href="#">Parent</a></li>
2053
+ <li>
2054
+ <a href="#">Parent</a>
2055
+ <div class="uk-navbar-dropdown">
2056
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2057
+ <li class="uk-active"><a href="#">Active</a></li>
2058
+ <li class="uk-parent">
2059
+ <a href="#">Parent</a>
2060
+ <ul class="uk-nav-sub">
2061
+ <li><a href="#">Sub item</a></li>
2062
+ <li><a href="#">Sub item</a></li>
2063
+ </ul>
2064
+ </li>
2065
+ <li class="uk-nav-header">Header</li>
2066
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2067
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2068
+ <li class="uk-nav-divider"></li>
2069
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2070
+ </ul>
2071
+ </div>
2072
+ </li>
1877
2073
  <li><a href="#">Item</a></li>
1878
2074
  <li><a href="#">Item</a></li>
1879
2075
  </ul>
@@ -1885,14 +2081,33 @@
1885
2081
 
1886
2082
  <nav class="uk-navbar-container uk-margin">
1887
2083
  <div class="uk-container uk-container-expand">
1888
- <div class="uk-navbar">
2084
+ <div uk-navbar>
1889
2085
  <div class="uk-navbar-left">
1890
2086
 
1891
2087
  <a class="uk-navbar-item uk-logo" href="#">Logo</a>
1892
2088
 
1893
2089
  <ul class="uk-navbar-nav">
1894
2090
  <li class="uk-active"><a href="#">Active</a></li>
1895
- <li><a href="#">Parent</a></li>
2091
+ <li>
2092
+ <a href="#">Parent</a>
2093
+ <div class="uk-navbar-dropdown">
2094
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2095
+ <li class="uk-active"><a href="#">Active</a></li>
2096
+ <li class="uk-parent">
2097
+ <a href="#">Parent</a>
2098
+ <ul class="uk-nav-sub">
2099
+ <li><a href="#">Sub item</a></li>
2100
+ <li><a href="#">Sub item</a></li>
2101
+ </ul>
2102
+ </li>
2103
+ <li class="uk-nav-header">Header</li>
2104
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2105
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2106
+ <li class="uk-nav-divider"></li>
2107
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2108
+ </ul>
2109
+ </div>
2110
+ </li>
1896
2111
  <li><a href="#">Item</a></li>
1897
2112
  <li><a href="#">Item</a></li>
1898
2113
  </ul>
@@ -1902,21 +2117,45 @@
1902
2117
 
1903
2118
  <ul class="uk-navbar-nav">
1904
2119
  <li class="uk-active"><a href="#">Active</a></li>
1905
- <li><a href="#">Parent</a></li>
2120
+ <li>
2121
+ <a href="#">Parent</a>
2122
+ <div class="uk-navbar-dropdown">
2123
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2124
+ <li class="uk-active"><a href="#">Active</a></li>
2125
+ <li class="uk-parent">
2126
+ <a href="#">Parent</a>
2127
+ <ul class="uk-nav-sub">
2128
+ <li><a href="#">Sub item</a></li>
2129
+ <li><a href="#">Sub item</a></li>
2130
+ </ul>
2131
+ </li>
2132
+ <li class="uk-nav-header">Header</li>
2133
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2134
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2135
+ <li class="uk-nav-divider"></li>
2136
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2137
+ </ul>
2138
+ </div>
2139
+ </li>
1906
2140
  <li><a href="#">Item</a></li>
1907
2141
  </ul>
1908
2142
 
1909
- <div class="uk-navbar-item">
1910
- <ul class="uk-grid-small" uk-grid>
1911
- <li>
1912
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
1913
- </li>
1914
- <li>
1915
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
1916
- </li>
1917
- <li>
1918
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
2143
+ <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
2144
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true">
2145
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2146
+ <li class="uk-active"><a href="#">Active</a></li>
2147
+ <li class="uk-parent">
2148
+ <a href="#">Parent</a>
2149
+ <ul class="uk-nav-sub">
2150
+ <li><a href="#">Sub item</a></li>
2151
+ <li><a href="#">Sub item</a></li>
2152
+ </ul>
1919
2153
  </li>
2154
+ <li class="uk-nav-header">Header</li>
2155
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2156
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2157
+ <li class="uk-nav-divider"></li>
2158
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1920
2159
  </ul>
1921
2160
  </div>
1922
2161
 
@@ -1927,7 +2166,7 @@
1927
2166
 
1928
2167
  <nav class="uk-navbar-container uk-margin">
1929
2168
  <div class="uk-container uk-container-expand">
1930
- <div class="uk-navbar">
2169
+ <div uk-navbar>
1931
2170
  <div class="uk-navbar-left">
1932
2171
 
1933
2172
  <a class="uk-navbar-item uk-logo" href="#">Logo</a>
@@ -1937,7 +2176,26 @@
1937
2176
 
1938
2177
  <ul class="uk-navbar-nav ">
1939
2178
  <li class="uk-active"><a href="#">Active</a></li>
1940
- <li><a href="#">Parent</a></li>
2179
+ <li>
2180
+ <a href="#">Parent</a>
2181
+ <div class="uk-navbar-dropdown">
2182
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2183
+ <li class="uk-active"><a href="#">Active</a></li>
2184
+ <li class="uk-parent">
2185
+ <a href="#">Parent</a>
2186
+ <ul class="uk-nav-sub">
2187
+ <li><a href="#">Sub item</a></li>
2188
+ <li><a href="#">Sub item</a></li>
2189
+ </ul>
2190
+ </li>
2191
+ <li class="uk-nav-header">Header</li>
2192
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2193
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2194
+ <li class="uk-nav-divider"></li>
2195
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2196
+ </ul>
2197
+ </div>
2198
+ </li>
1941
2199
  <li><a href="#">Item</a></li>
1942
2200
  <li><a href="#">Item</a></li>
1943
2201
  </ul>
@@ -1945,17 +2203,22 @@
1945
2203
  </div>
1946
2204
  <div class="uk-navbar-right">
1947
2205
 
1948
- <div class="uk-navbar-item">
1949
- <ul class="uk-grid-small" uk-grid>
1950
- <li>
1951
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
1952
- </li>
1953
- <li>
1954
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
1955
- </li>
1956
- <li>
1957
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
2206
+ <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
2207
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true">
2208
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2209
+ <li class="uk-active"><a href="#">Active</a></li>
2210
+ <li class="uk-parent">
2211
+ <a href="#">Parent</a>
2212
+ <ul class="uk-nav-sub">
2213
+ <li><a href="#">Sub item</a></li>
2214
+ <li><a href="#">Sub item</a></li>
2215
+ </ul>
1958
2216
  </li>
2217
+ <li class="uk-nav-header">Header</li>
2218
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2219
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2220
+ <li class="uk-nav-divider"></li>
2221
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1959
2222
  </ul>
1960
2223
  </div>
1961
2224
 
@@ -2039,6 +2302,12 @@
2039
2302
  <td>200</td>
2040
2303
  <td>The dropbar transition duration.</td>
2041
2304
  </tr>
2305
+ <tr>
2306
+ <td><code>container</code></td>
2307
+ <td>Boolean</td>
2308
+ <td>false</td>
2309
+ <td>Define a target container via a selector to specify where the drops should be appended in the DOM.</td>
2310
+ </tr>
2042
2311
  </tbody>
2043
2312
  </table>
2044
2313
  </div>