Foundation6 demos

Basic topbar

A basic responsive topbar with one level item.

Topbar we knowed from previous Foundation versions, does not exists anymore. Now we are talking about menu components and topbar is just a behavior for menus.

Now Topbar component itself is only about to manage title part, left and right menus. Everything else like responsive toggle, sticky, dropdown, etc.. has been splitted into their own component.

You must combine them to achieve the same look and feel than in Foundation5.

Also, there is not so much settings to define to adjust topbar elements look. Each menu components have some settings but since they are global components which you may use out of a topbar, you should not set them only for the topbar look.

Finally, it require a little bit of custom CSS to have a nicer topbar look. See sources/sass/scss/components/_headers.scss from repository.

Item 1

Lacus a rutrum nisl mattis, iaculis penatibus hendrerit non amet iaculis, tempus scelerisque per potenti, fusce dictum consectetuer iaculis mattis dictumst, sapien.

Semper scelerisque nec dolor ultricies habitasse, libero feugiat massa sodales consectetuer sapien nullam, dictum dictumst vehicula nisl. Aenean aliquet nibh diam, non justo dictum ullamcorper, blandit egestas inceptos.

Auctor aliquet magnis ligula sociosqu, cubilia at ultrices suscipit risus, sit eu pellentesque malesuada mi justo, erat hymenaeos ridiculus lacinia. Est taciti potenti adipiscing.

Item 2

Aptent sem nullam felis vitae curae leo, senectus elit imperdiet in justo mus hendrerit, praesent scelerisque. Netus odio molestie turpis interdum, dui elit nascetur.

Vestibulum penatibus est commodo at sit etiam, proin et imperdiet feugiat nonummy hendrerit, laoreet netus ipsum senectus purus, mollis amet natoque neque. Natoque habitant cum viverra.

Ultricies sociis natoque sed turpis dis parturient pede, lectus dolor ultrices cras, dis lacinia phasellus scelerisque sapien aenean, commodo class. Accumsan curabitur blandit sagittis, nam.

Item 3

Consectetuer aliquet sodales torquent eget, hac nec ad convallis tincidunt ut conubia, rhoncus nunc massa penatibus volutpat nascetur placerat,. Hendrerit cursus nam interdum eget convallis.

Donec praesent ad nibh neque fames, in erat pulvinar lectus tempor, netus scelerisque primis arcu ac taciti vehicula, erat hac quam. Auctor quam consequat maecenas, lacus ad.

Semper sociis risus ultrices etiam vulputate amet, ligula nullam facilisis sagittis porta egestas, senectus nibh feugiat in imperdiet. Justo malesuada.

Item 4

Sollicitudin porttitor proin sem aliquam orci malesuada blandit lobortis, proin mattis nunc netus penatibus faucibus. Vulputate natoque adipiscing luctus, mauris laoreet congue lobortis, nostra hymenaeos tellus.

Eros odio quis penatibus dapibus dictumst, hendrerit congue dis imperdiet nunc, proin augue curae facilisis mollis, nunc sit nibh a mus, hac. Praesent.

Dis auctor eget maecenas proin ut et scelerisque, consequat eu hac vel viverra pulvinar, orci nostra semper. Leo platea morbi pharetra consectetuer, ut curabitur sem class primis.

Item 5

Interdum sodales nec sed ridiculus at egestas, rutrum rhoncus montes malesuada nisi, turpis commodo per nibh vulputate, augue dignissim eros lorem luctus tellus,. Cum feugiat.

Massa nonummy tempor suspendisse lorem felis, laoreet nullam nibh suscipit gravida quam, varius nonummy eros nibh sit eros, non pellentesque fermentum commodo. Phasellus purus phasellus proin.

Amet et sed porttitor platea, porttitor lobortis congue vitae dolor, vel metus vivamus elementum lorem, pellentesque class ligula fames litora duis, ligula phasellus odio. Lectus mauris.

Item 6

Hendrerit phasellus ligula nec praesent taciti pede vel, sit vestibulum tellus gravida, natoque venenatis nisl ridiculus augue est, libero luctus ultrices eget. Dis vitae dictum faucibus, ullamcorper fusce dui.

Etiam sapien sit primis turpis tempor ornare, aliquet tincidunt pretium placerat vitae, tellus amet egestas integer et mauris, eleifend per nam placerat. Class morbi hendrerit nullam magna.

Diam vulputate elementum fringilla curae tincidunt, ligula adipiscing lorem nullam porta, ullamcorper magna faucibus nisi praesent rutrum, quam nunc. Laoreet massa amet justo.