I RECCOMEND VIEWING THIS ON MOBILE IN PORTRAIT!

Hey! I hope you enjoy messing around with this div thing. When iOS26 released, it showcased liquid glass, alongside a floating tab bar at the bottom, with ways to have interactive nav items be at the bottom instead of the top for reachability, and soon after OneUI8 introduced a similar looking floating tab bar at the bottom for some apps. So I decided to make it for the web, using glassmorphism instead of liquid glass (which isnt well replicated for the web yet, either laggy or not accurate) and use a more frosted glass look. So enjoy messing around with the floating tab bar!

I know there are some issues, like it snapping to where your finger is, not using the original SF icons (I don't have a Mac and don't feel like emulating one, so I'm using Tabler icons instead for now), and sometimes you're able to get 2 or even 3 selected if you tap fast enough (I've never been able to get all 4 though...), and the floating blob might disappear if you tap in a certain way, and it not being "true" liquid glass, but as a concept this should be fine. I might implement some more features, but as a proof of concept this should work absolutely fine.

After seeing this in the new design language for iOS26 and even some new OneUI8 apps showing the new tab bar at the bottom look, I wanted to make one for the web myself.

Thank you, and enjoy!

Sample Lorem Ipsum text to be able to scroll up and down for the compact or expanded view (coming soon!)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel nunc non dui ultricies facilisis et quis magna. Nulla eu magna eleifend, blandit sapien quis, cursus massa. Suspendisse lobortis leo id feugiat egestas. Quisque gravida tempor massa, vitae faucibus tortor gravida tristique. Aenean porta dignissim malesuada. Morbi ultricies, nibh id vestibulum convallis, erat urna maximus magna, sit amet tincidunt nunc velit quis turpis. Curabitur tempor, orci vitae imperdiet pellentesque, turpis eros aliquam purus, eget viverra enim enim vitae augue. Praesent eget blandit turpis. Aenean efficitur tempor sem, ut varius metus tristique suscipit. Ut nec dui interdum dolor semper dignissim. Nam viverra eu mi vehicula sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu enim sollicitudin, efficitur nulla eget, aliquam risus. Proin non fringilla lacus. Donec vel venenatis eros. Fusce pellentesque leo vitae mi rhoncus pellentesque. Donec tincidunt nunc sit amet fringilla blandit. Pellentesque tincidunt bibendum libero. Suspendisse tincidunt blandit augue vitae bibendum. Integer fermentum, dui ut placerat tempus, metus nisi maximus tellus, eget dignissim sapien massa id velit. Mauris feugiat arcu pellentesque scelerisque viverra. In posuere est in ex faucibus, nec maximus justo auctor. Suspendisse ultricies interdum enim et ornare. Duis sodales lacus in fringilla aliquam. Nulla euismod tellus non nibh luctus dictum. Nam sed enim sit amet nisi congue mattis. Curabitur accumsan egestas nulla, eget malesuada quam cursus vitae. Suspendisse placerat est dolor, non posuere ex mollis id. Vestibulum tempus velit nisl, cursus congue dolor congue in. Vestibulum maximus consectetur neque, vitae condimentum mi. In eu malesuada ante, nec consequat risus. Praesent tempus sem in ipsum varius, quis fringilla metus hendrerit. Sed non maximus augue. Fusce id lobortis leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum et orci quis libero sollicitudin tincidunt. Fusce non ligula felis. Sed id turpis volutpat, rhoncus nulla sed, finibus elit. Etiam dictum mi at tellus tincidunt, ac consequat nunc ultrices. Aliquam enim lacus, porttitor vitae tortor nec, euismod consectetur ligula. Curabitur vel hendrerit ligula, in elementum quam. Mauris eu ex ut quam elementum aliquam a ac dolor. Nullam ut cursus est. Nunc neque quam, tristique non fringilla vel, suscipit sed nisl. Etiam eget tellus viverra, facilisis urna in, malesuada nibh. Vivamus fermentum tortor eget elit feugiat gravida. Praesent molestie mi dui, vel consectetur felis fringilla at. Proin placerat tempor massa, ac ornare nibh pulvinar vel. Pellentesque non malesuada sapien. Morbi dignissim nisl lacus, sit amet tempor erat aliquam et. Curabitur vitae urna sed tortor pellentesque lobortis sed eget ipsum. Vivamus consequat dapibus mi, eu iaculis erat sodales a. Donec vestibulum nulla sed mattis pharetra. Cras blandit tincidunt feugiat. Phasellus ac purus a mi pulvinar cursus. Nulla tempus nulla iaculis ligula porttitor, quis egestas justo dignissim. Duis sed egestas purus. Ut congue lectus convallis, euismod felis volutpat, ultricies ex. Mauris eros est, bibendum a nisi accumsan, imperdiet blandit turpis. Praesent gravida est mi, quis luctus ligula rhoncus at. Nunc pulvinar efficitur ornare. Cras tortor quam, dapibus quis aliquam ac, cursus a neque.